Vuejs keyup/ v-on:keyup事件不起作用

Question

当输入是键盘时，我试图从方法中启动一个函数，但它不起作用。我的模板代码是：

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

我的方法：

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

我也尝试了v-on:keyup。

Answer 1

enter code here，您可以使用自己的v模型变量使用watch属性，在那里您可以编写逻辑。当您的模型值更改时，它将调用watch属性。

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

Answer 2

尝试用setup替换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/quasar@1.19.5/dist/quasar.min.css" rel="stylesheet" type="text/css">
<div id="q-app">
  <q-input type="number" min="1" dense borderless debounce="300" class="q-ma-xs" 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/quasar@1.19.5/dist/quasar.umd.min.js"></script>

​