Two sets of text boxes are displayed in a grid format, which can be viewed here.
The objective is for users to fill out the top boxes and have the values automatically update as they fill out the corresponding bottom boxes. For example, if you input 100 in the first box at the top, then 75 in the first box at the bottom, the value in the top box should adjust to 25.
I attempted to use onchange() but didn't succeed. The v-model attribute seems to present issues with its two-way binding feature, which is understandable. Any assistance on this matter would be greatly appreciated.
Below is the HTML code that generates the input boxes:
> <form v-on:submit.prevent="addNewTask">
<table>
<thead>
<tr>
<th></th>
<th v-for="(column, columnIndex) in columns" :key="columnIndex">{{column}}</th>
</tr>
</thead>
<tbody>
<tr v-for="(record, rowIndex) in records" :key="rowIndex">
<td>{{record.row}}</td>
<td v-for="(detail, index) in record.details" :key="index">
<input type="text" v-model="detail.value">
</td>
</tr>
</tbody>
</table>
<br><br>
<table>
<thead>
<tr>
<th></th>
<th v-for="(columnS, columnIndexS) in columns_Spend" :key="columnIndexS">{{columnS}}</th>
</tr>
</thead>
<tbody>
<tr v-for="(recordS, rowIndexS) in records_Spend" :key="rowIndexS">
<td>{{recordS.rowS}}</td>
<td v-for="(detailS, indexS) in recordS.details_Spend" :key="indexS">
<input type="text" v-model="detailS.value_Spend">
</td>
</tr>
</tbody>
</table>
<br><br>
<button v-if="this.isEdit == false" type="submit" class="btn btn-success btn-block mt-3">
Submit
</button>