Vuejs keyup/ v-on:keyup event is not working-CodePudding

I am trying to initiate a function from methods while an input is keyup, But it's not working. My codes from template are :

<q-input type="number" min="1" dense borderless debounce="300"  v- 
model="invoice_product.item_qty" placeholder="quantity" filled 
@keyup="calculateLineTotal(invoice_product)" />

My method :

<script>
   export default {
      setup() {
        return {
           invoice_product: {
             item_qty: ''
           }
        }
      },
      methods: {
         calculateLineTotal(invoice_product) {
           alert(invoice_product.item_qty)
         }
      }
   }
</script>

I also tried with v-on:keyup

CodePudding user response：

enter code hereYou can use watch property using your v model variable and there you can write your logic. When your model value change it will called watch property

watch:{
 “Variable” : function(val) {
   //method 
 }
}

CodePudding user response：

Try to replace setup with data:

new Vue({
  el: '#q-app',
  data() {
    return {
      invoice_product: {item_qty: ''}
    }
  },
  methods: {
    calculateLineTotal(invoice_product) {
      alert(invoice_product.item_qty)
    }
  },
})

<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material Icons" rel="stylesheet" type="text/css">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/quasar.min.css" rel="stylesheet" type="text/css">
<div id="q-app">
  <q-input type="number" min="1" dense borderless debounce="300"  v- 
    model="invoice_product.item_qty" placeholder="quantity" filled 
    @keyup="calculateLineTotal(invoice_product)" />
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@^2.0.0/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/quasar.umd.min.js"></script>