How can I multiple the two fields? - vue.js

Question

How can I multiple the Unit price and the value of the Unit price and the vat?
Example:
Quantity: 2
Vat: 15%
Unit price: 2000
=2000x1.15 (Unit price x vat)
=2300x2
Can someone help me with this? Thank you. I am using Vue/Nuxt. I don't know how to do it.
<el-table-column label="Quantity">
<template slot-scope="scope">
<el-form-item>
<el-input
v-model="scope.row.quantity"
placeholder="Input quantity..."
class="w-full"
required
>
</el-input>
</el-form-item>
</template>
</el-table-column>
<el-table-column label="Unit Price">
<template slot-scope="scope">
<el-form-item>
<el-input
v-model="scope.row.unit_price"
placeholder="Input unit price..."
class="w-full"
required
>
</el-input>
</el-form-item>
</template>
</el-table-column>
<el-table-column label="VAT">
<template slot-scope="scope">
<el-select
v-model="scope.row.vat"
:remote-method="remoteMethod"
remote
filterable
style="width: 100%"
>
<el-option
v-for="{ name } in tax"
:key="name"
:label="name"
:value="name"
>
</el-option>
</el-select>
</template>
</el-table-column>
<el-table-column label="Total">
<template slot-scope="scope">
<el-form-item>
<el-input
v-model="scope.row.total"
placeholder="Input total..."
class="w-full"
required
value="scope.row.quantity * scope.row.vat"
>
</el-input>
<span></span>
</el-form-item>
</template>
</el-table-column>

Answer 1

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.