vue中table表格内编辑问题

Question

需求,如题:就是实现 table 表内编辑我的问题:先看代码<tbody>    <tr v-for="obj in objs" :key="obj">        <td @dblclick="changeEditable">            <input v-show="editable" v-model="obj.label" @keyup.enter="changeEditable"/>            <span v-show="!editable"  v-model="obj.label">显示内容</span>        </td>    </tr></tbody>代码简化了很多,功能就是:遍历 objs 然后显示在表格中(问题部分)双击某一 单元格 的值,通过 editable 控制是否是可编辑状态按照上面的写法, 双击某一个 单元格 时, 整列 都会处于编辑状态,很尴尬那么我的问题就是:如何实现双击某一单元格时, 只让该单元格的值处于编辑状态?注意: editable 不能作为 obj 的属性存在修改问题, 这里不删除上面这里的 注意, 因为当初是这么想的, objs 是从其他地方获取的,无法更改里面的数据, 所以想当然的以为 obj 中的属性也无法更改,其实是可以添加属性的!

Answer 1

editable类型为数组，改成v-show="editable[index]"，外面的v-for改为v-for=(obj,index) in objs,在方法里传入index，changeEditable(index),修改显示状态的时候记得要使用vue.$set来设置