columnSetupArr:[]
newCustomTable:{
columnName:"",
columnDetail:"",
isColumnTableVal:1
}
/*add*/
this.form.columnSetupArr.push(this.newCustomTable);
<table class="projectTable">
<tr v-for="(item,index) in form.columnSetupArr" v-if="index>=4">
<td>
<el-col :span="20">
<el-input style="width:120px" v-model="item.columnName"></el-input>
</el-col>
</td>
<td>
<!-- <el-col :span="20">
<el-input style="width:120px" v-model="item.columnDetail"></el-input>
</el-col> -->
<el-form-item label="">
<el-col :span="10">
<el-input v-model="item.columnDetail"></el-input>
</el-col>
</el-form-item>
</td>
<td>
<el-select v-model="item.isColumnTableVal" placeholder="">
<el-option
v-for="item in isnewCustomTableItemsOptions"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</td>
<td>
</td>
</tr>
</table>
Click the button to push an object in the array to dynamically generate a row of data from a table table, and then v-for to render the data.
because there is an input in each row that needs to be bound to the input, that is, the item.columnName = "item.columnName". The problem now is that after several item.columnName are generated, all the item.columnName are linked, that is, I modify the input in the first row and then the input value of the same v-model in the next few rows will also change. What should I do with this