如何在已经渲染好的数据中修改数据（非input框内）

Question

现在有一个需求 需要在已经通过li标签循环渲染出来的数据中不通过弹窗直接修改数据，请问该如何实现

Answer 1

contenteditable 属性

• contenteditable - HTML（超文本标记语言） | MDN
• Content Editable - Web 开发者指南 | MDN

Answer 2

不弹框那就加个contenteditable属性。
点击一下将dom的这个属性为true，加个ref好操作，再给个focus()事件自动获得焦点。
美滋滋啊，还要什么弹框

Answer 3

先确定是让用户修改数据，还是用程序修改。

用户编辑

用户编辑需要提供可编辑的控件。
一种做法是将元素设置为可编辑contenteditable，用户可以直接在元素中编辑，也能捕获到事件。但是考虑到是Vue.js渲染出的Node，最好不要直接编辑。
另一种做法是在不可编辑的元素上监听触发事件，如click或pointerdown。在触发事件后，将元素隐藏，并在相同位置放置可编辑的控件，如textarea，并在其中填写入元素中本来的数据。这样，监听可编辑控件的事件，就能更新数据了。当触发特定条件，如回车，失去焦点等都可以重新将可编辑控件替换为元素。由于数据已更新，所以元素内的数据也是最新的。

程序编辑

直接改变数据并重新替换元素的内容即可。Vue.js下，因为数据已经绑定，直接变更数据即可。