Values ​​in Vue 3 input into V-model equation

Question

I use vue3, but there is a problem with the input,

I want to display the equation result for this value like this: <Enter number

id="integeronly"

        :value="element.qu * element.price"

      />

</td>

But the problem is that when I enter a number in the input quantity, the result does not update dynamically and I have to click somewhere

I tried V-model instead of :value but it doesn't work

If :value is not possible, could you please help me, how can I do this using v-model with a function? If yes, please tell me how to write that function

Answer 1

Enter code here This is the code:

sssccc

It works, but it's not dynamic, it doesn't show up immediately on the input

Answer 2

Try a code snippet like the following:

new Vue({
  el: '#demo',
  data() {
    return {
      elements: [{id: 1, ref: 'laptop', qu: 5, price: 15}, {id: 2, ref: 'mob', qu: 3, price: 10}]
    }
  },
  methods: {
    total(el) {
      return el.qu * el.price
    }
  }
})

Vue.config.productionTip = false
Vue.config.devtools = false

sssccc