I use vue3 and I have a problem with an input,

I want to display the result of an equation on the value like this: <InputNumber

        id="integeronly"

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

      />

</td>

but the problem is that when I put a number in the input quantity the result does not update in a dynamic way I have to click somewhere

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

please can you help me if it’s not possible with :value how to do it with v-model with a function? if so, please tell me how to write the function

CodePudding user response：

Try with computed property:

new Vue({
  el: '#demo',
  data() {
    return {
      element: {qu: 5, price: 15}
    }
  },
  computed: {
    total() {
      return this.element.qu * this.element.price
    }
  }
})

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="demo">
  <input id="integeronly" :value="total" />
</div>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

enter code here here is the code:

<tr v-for="(element, index) in elements" :key="element.id">
     <td>
              <InputNumber id="integeronly" v-model="element.qu" />
            </td>
            <td>
              <InputNumber id="integeronly" v-model="element.price" />
            </td>
            <td>
              <InputNumber id="integeronly" :value="elment.price* element.qu" />
            </td>
          </tr>

<script>
data: () => {
    return {
      elements: [
        {
          id: 0,
          ref: "laptop",
          price: "400",
          qu: "2",
        },
      ],
</script>

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

it works but it is not dynamic it does not display on the input instantaneously