Currently, I have two inputs named col and row that can be adjusted to correspond with the columns and rows of a table.
I would like to view and modify the content of this table. I am utilizing a v-model to update my data based on the rows and columns inputted, but when integrating this into my v-for loop for the table, it does not automatically update.
The issue lies in the fact that the table is not being updated as intended.
This is the code snippet I am working with:
<div class="col-md-2">
<input type="number" min="1" v-model="table.rows" class="form-control" id="rows">
</div>
<label for="columns" class="control-label col-md-1">columns:</label>
<div class="col-md-2">
<input type="number" min="1" v-model="table.cols" class="form-control" id="cols">
</div>
<table class="table">
<tbody v-for="row in table.rows">
<tr>
<td contenteditable="true">John</td>
</tr>
</tbody>
</table>
data() {
return {
table: {
rows: 1,
cols: 1,
key: "Table",
tableStyle: 1,
},
insert: 1,
}
}
Any assistance or guidance would be greatly appreciated.