[Vuejs]-How can I multiple the two fields?

by

0👍

If I read the code correctly you are very close:

In this segment:

      <el-input
        v-model="scope.row.total"
        placeholder="Input total..."
        class="w-full"
        required
        value="scope.row.quantity * scope.row.vat"
      >

You should remove the v-model and use v-bind:value instead of value:

      <el-input
        placeholder="Input total..."
        class="w-full"
        required
        v-bind:value="scope.row.quantity * scope.row.vat"
      >
     // or: @value="scope.row.quantity * scope.row.vat"

If you want the total to be editable by the user, you could do the following

      <el-input
        placeholder="Input total..."
        class="w-full"
        required
        v-bind:value="scope.row.quantity * scope.row.vat"
        @input="scope.$row.total = $event.target.value"
      >

But, this means that $row.total will only be set when the user changes it.

Another strategy would be to calculate the total field for each row before you give it to the template, then you would only use v-model="scope.$row.total" and omit v-bind:value.

Leave a comment