title: Vue.js, iView UI how to increment and decrement input value
body: <p>I have this input field with + and - icons. I would like when i click on + icon, the input value increment by one and when i click on - icon, the input value decrement by 1. the default input value is 1.</p>
  <p>I already have methods to increment and decrement but they only work once, the DOM is not being updated. How do fix this?</p>
  <p><strong>Screenshot</strong>
  <a href="https://i.stack.imgur.com/suJaP.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/suJaP.png" alt="enter image description here" /></a></p>
  <p>Here is my code.</p>
  <pre><code>&lt;Col :xs=&quot;24&quot; :sm=&quot;24&quot; :md=&quot;12&quot; :lg=&quot;12&quot;&gt;
     &lt;FormItem label=&quot;No. of Pages&quot; label-position=&quot;top&quot;&gt; 
        &lt;Input v-model=&quot;pages&quot;&gt;
           &lt;span slot=&quot;prepend&quot; @click=&quot;decrement&quot;&gt;&lt;Icon type=&quot;md-remove-circle&quot; /&gt;&lt;/span&gt;
           &lt;span slot=&quot;append&quot; @click=&quot;increment&quot;&gt;&lt;Icon type=&quot;ios-add-circle&quot; /&gt;&lt;/span&gt;
        &lt;/Input&gt;
      &lt;/FormItem&gt; 
  &lt;/Col&gt;
  </code></pre>
  <p><strong>script</strong></p>
  <pre><code>data() {
      return {
        pages: 1
      };
    },
  
   
  
  methods: {
      increment() {
        this.pages++;
      },
      decrement() {
        if (this.pages === 1) {
          alert(&quot;Negative quantity not allowed&quot;);
        } else {
          this.pages--;
        }
      }
  </code></pre>