vue.js - Vue.js，iView UI如何增加和减少输入值

Question

我有这个带有 + 和 - 图标的输入字段。我想当我点击 + 图标时，输入值加一，当我点击 - 图标时，输入值减 1。默认输入值为 1。

我已经有了递增和递减的方法，但它们只工作一次，DOM 没有被更新。如何解决这个问题？

截屏

这是我的代码。

<Col :xs="24" :sm="24" :md="12" :lg="12">
   <FormItem label="No. of Pages" label-position="top"> 
      <Input v-model="pages">
         <span slot="prepend" @click="decrement"><Icon type="md-remove-circle" /></span>
         <span slot="append" @click="increment"><Icon type="ios-add-circle" /></span>
      </Input>
    </FormItem> 
</Col>

脚本

data() {
    return {
      pages: 1
    };
  },

 

methods: {
    increment() {
      this.pages++;
    },
    decrement() {
      if (this.pages === 1) {
        alert("Negative quantity not allowed");
      } else {
        this.pages--;
      }
    }