title: Vue JS - Trigger Method if input lost focus
body: <p>Quick question about Vue JS.
  On my website, I have got a shopping cart and the user can enter any quantity. I am saving this quantity to the database table when he enters it...</p>
  <p><strong>issue is</strong>, the input field keeps firing save method every single digit of user types. For example, if the user types 123, the save method called 3 times. 1 and 12 and 123</p>
  <p>I just want to call this save method when this input loses the focus, so I can save only once, not every single digit.</p>
  <p><strong>Component</strong></p>
  <pre><code>Vue.component('product-counter', {
  props: ['quantity'],
  data: function () {
      return {
          count: this.quantity
      }
  },
  template: `
          &lt;div class=&quot;input-group &quot;&gt;
            &lt;input  v-bind:value=&quot;quantity&quot; v-on:input.focus=&quot;$emit('input', $event.target.value)&quot;  type=&quot;text&quot; class=&quot;form-control col-2&quot;&gt;
          &lt;/div&gt;
          `
   })
  </code></pre>
  <p><strong>Component Call</strong></p>
  <pre><code>                &lt;product-counter 
                               v-bind:productcode=&quot;item.productCode&quot;  
                               v-bind:quantity=&quot;item.quan&quot; 
                               v-on:input=&quot;item.quan=updateItemQuantity($event,item.productCode)&quot; 
                               v-on:increment-quantity=&quot;item.quan=updateItemQuantity(item.quan,item.productCode)&quot; 
                               v-on:decrement-quantity=&quot;item.quan=updateItemQuantity(item.quan,item.productCode)&quot;&gt;&lt;/product-counter&gt;
  </code></pre>
  <p><strong>Vue: Method</strong></p>
  <pre><code>        &quot;updateItemQuantity&quot;: function (totalquantity, pcode) {
         if (totalquantity != '') {
             ... Update Database...              
          }
      }
  </code></pre>