0

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

clipboard.png

2019-09-11 提问
3 个回答
0

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

0

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

用户编辑

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

程序编辑

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

撰写答案

推广链接