vue 动态生成list v-for循环问题

Question

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>

点击按钮向数组里面push一个对象，动态生成一个table表格的一行数据，然后v-for渲染数据，
因为每行里面有input 需要绑定v-model，即v-model="item.columnName"，现在的问题是生成了几个tr后，所有的item.columnName 都是联动的，就是我修改第一行的input 然后后面的几行里面同一个v-model的input值也会改变，这个应该怎么处理呀

Answer 1

换成如下即可

/*add*/
this.form.columnSetupArr.push({
  columnName:"",
  columnDetail:"",
  isColumnTableVal:1  
});

Answer 2

题主每次添加进数组this.form.columnSetupArr的时候都是同一个对象，对象是引用类型的，当然会导致联动。
楼上的是一种对的方法。另外还可以使用this.form.columnSetupArr.push(Object.assign({}, this.newCustomTable）来实现。总之要解决的是引用同一个对象的问题。