Vue.js 在Vue中向可排序LI动态添加元素

我有一个可排序的列表，其中我试图完成两件事：

使用+/-符号在此列表中添加/删除li元素

可排序列表有一个文本区域，包含数据-当我添加一个remove li items时，我很难将其存储在data属性中。例如，当我重新加载页面时，我希望我的新LI项与新数据项一起可见

非常感谢您的指导

HTML

|||


{{$data}}

JS

Vue.directive（'sortable'{
//将绑定元素插入DOM时。。。
插入：功能（el，绑定）{
create（el，binding.value | |{}）
}
})
新Vue({
el:“#应用程序”，
数据：{
项目：[
{id:1，文本：'AAA'，顺序：2}，
{id:2，文本：'BBB'，顺序：5}，
{id:3，文本：'CCC'，顺序：1}，
{id:4，文本：'DDD'，顺序：4}，
{id:5，文本：'EEE'，顺序：3}，
]
},
已创建：函数（）
{
this.orderedItems=\ uu.orderBy（this.items，'order'）
},
方法：{
工作：功能（事件）
{
var vm=这个
var els=vm.$refs.list.children
对于（变量i=0；i

---

这是可排序的列表：

我觉得您的代码很好，这是一个与持久性相关的概念性问题

Vue本身不会在客户端存储任何您调整的内容，因此刷新页面并恢复默认设置是完全正常的。您应该将添加的新项目存储在数据库中，或者使用web存储、Cookie等机制在客户端存储数据

---

我认为您需要一个数据库，在这里保存用户添加的所有项目有几个问题：

orderedItems

需要在

data（）

中声明，以使其成为反应式的

导出默认值{
数据（）{
orderedItems:[]
}
}

work（）

更新DOM而不是绑定模型（

orderedItems

）。但是，

orderedItems

需要是反应式的，Vue才能呈现更改

看起来

work（）

旨在增加每个项目的

order

属性，但我怀疑您实际上想要根据移动的项目更改项目顺序。

事件

参数包含

oldIndex

和

newIndex

，这是指

orderedItems

中移动项目的数组索引。您可以将该信息与

Array.prototype.splice

一起使用，以执行移入

orderedItems

：

const movedItem=this.orderedItems.splice（oldIndex，1）//删除
this.orderedItems.splice（newIndex，0，movedItem）//插入

鉴于

v-for

中的项目正在被重新排序或删除，为每个项目指定一个唯一的

键

，以便Vue正确呈现项目是很重要的。在这种情况下，

item.id

在项目之间具有足够的唯一性，因此应该绑定到

key

：

---

谢谢您的回复。本质上，我正在努力添加一个新项目并让该项目渲染：当单击“添加”按钮时，我无法获得渲染新组件的v-for。同样，当我单击“删除”按钮时，我无法重新渲染以删除组件。