vue 表格内双向绑定引起的问题解决

问题：
vue 表格渲染时，我点击编辑时，想直接在单元格上面进行编辑。

效果如下，正常是文本效果，点击编辑时，出现输入框

其实实现起来，逻辑很简单，但是中间我却出现了一个问题，效果始终出不来。

//表格渲染
<el-table-column label="名称" prop="title">
     <template slot-scope="scope">
         <span v-if="scope.row.isedit==0">{{ scope.row.title }}</span>
         <el-input v-else :key="scope.row.id" class="filter-item" style="width: 150px" v-model="scope.row.title" size="small" placeholder="名称"></el-input>
     </template>
 </el-table-column>
 
 //编辑按钮
 <el-button type="text" @click="editeRow(scope.row,scope.$index)">编辑</el-button>

methods: {
  //点击事件
  editeRow(row,index) {
      this.list[index].isedit = 1;
      console.log(this.list);
   }
 }

html 很简单，给一个字段 isedit ，点击编辑时，isedit =1 出现输入框，isedit =0 就是文本。

但是理想是丰满的，现实是骨感的，效果出不来。

反复查代码，百度，都没解决。于是我想着打印数据看看

打印点编辑后，数据如下，是这样的。看官们，可发现问题了 ，没发现，继续往下走：

异样的情况出现了

看到没，其他的参数都有get，set方法，但是isedit 却没有。

确实，问题就在这里。双向绑定问题

列表赋值如下

  init() {
     getUnitProject({
         page: this.pageParam.page,
         perPage: this.pageParam.size
     }).then(response => {
         this.list = response.data.list;
         this.list.forEach(item => {
             item.isedit = 0;
         });
     });
 },

我是先赋值给 list ，然后在循环赋值 isedit ，这样就导致了上面的问题出现。

修改后如下：

 response.data.list.forEach(item => {
   item.isedit = 0;
   //或者
   this.$set(item , 'isedit ', '0');
 });

//重新赋值解决
 this.list = response.data.list;

问题解决；

原理：

Vue 的响应式系统依赖于 属性的访问和修改 来触发更新。

如果你直接修改数组的某个元素（如 this.items[index].newField = value），Vue 可能无法检测到这种变化，因为 Vue 无法追踪到数组元素的属性变化。

解决办法：

• 使用 Vue.set：确保添加的字段是响应式的。
• 替换整个对象：通过创建新对象替换原对象，触发响应式更新。

通过以上方法，可以解决子组件修改数组字段后无法双向绑定的问题。

总结：
1.基础不牢，地动山摇；get ，set 没有掌握
2.及时打印数据，看看数据异常，这样可以少走弯路

其实应该还有其他的解决办法，欢迎大家指正。