Блог

У меня есть это поле ввода со значками и -. Я хотел бы, чтобы при нажатии на значок входное значение увеличивалось на единицу, а при нажатии на значок — входное значение уменьшалось на 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--;
      }
    }