Javascript Vue拼接（将数组项移动到数组中的另一个位置）不更新DOM

我正在尝试将数组中位于位置

x

的一个项目移动到位置

2

。下面的代码工作并将项目移动到新位置。但是，vue不会更新

DOM

这是我正在使用的代码：

export default class LayersPanel extends Vue {
  @ProvideReactive() public layers: any[] = [
    { name: 'Layer 1' }, { name: 'Layer 2' }, { name: 'Layer 3' }, { name: 'Layer 4' }
  ]
  public onDragDrop(evt: DragEvent) {
    let offset = parseInt(evt.dataTransfer.getData('text/plain'))
    this.layers.splice(2, 0, this.layers.splice(offset, 1)[0])
  }
}

我不确定这是否与：

通过直接设置索引（例如，arr[0]=val）或修改其长度属性来修改数组时。同样，Vue.js也无法接受这些更改。始终使用数组实例方法修改数组，或完全替换它。Vue提供了一个方便的方法arr.$set（index，value），它是arr.splice（index，1，value）的语法糖

---

据推测，

.splice（）

是一种变异方法，所以我认为这不重要。我做错了什么？

问题的一个可能来源是您选择的

键

：

最初，

组件将具有键

0

、

1

、

2

和

3

，分别对应于层

层1

到层4

如果您随后将位置0中的层移动到位置2，则现在将按以下顺序进行操作：

第2层

，

第3层

，

第1层

，

第4层

。但是，键由索引决定，因此

第2层

现在的键值为

0

当Vue在重新渲染后尝试将组件配对时，它将使用关键帧。因此，带有

键
的
的
用于对应于
第1层
，但现在它将对应于
第2层

这不一定是个问题<代码>第4层很简单：它没有移动，所以不会被更改。其他三个已经移动，但他们的
info
道具应该相应更新

这就是有状态组件的问题所在。前三个组件将更新其
信息
道具，这不一定会对任何其他内部状态产生任何影响，例如
数据
属性所持有的状态。它们仍将保留原始
info
值的值

这里的解决方案通常是为
键
使用更合适的值。这个问题不清楚在你的情况下，这样的值可能是多少。在某些情况下，您可能需要在每个数组项中添加一个额外的属性，以便为其提供一个合适的属性

重要的是键是不同的，并且与数组项相关联。如果层的
名称
是唯一标识符，则可以使用该标识符，例如
：key=“layer.name”
很可能
层
不是反应性的。它是在您的
数据中定义的吗
？我正在使用typescript和decorators:
@ProvideReactive（）公共层：any[]=[{name:'Layer 1'}，{name:'Layer 2'}，{name:'Layer 3'}，{name:'Layer 4'}]
@skille，如果我只是用
this.splice（偏移量，1）删除元素
项目被删除，
DOM
更新项目列表，但不更新文本这听起来像是
v-for
中的
key
属性有问题。很难说没有看到模板代码。您可能希望尝试在
v-for
中使用
{{name}
转储图层名。我怀疑您使用的是没有对更改做出反应的有状态组件，但是
{{{name}}
应该显示最新的值。好吧，酷！什么时候使用索引作为键合适？@GetOffMyLawn键
需要唯一地标识从一个渲染到下一个渲染的等效VNode（转换为组件和元素）。将更新等效组件，而没有合适等效组件的组件将相应销毁或创建。了解这一点非常重要：根据我的经验，大多数使用Vue的开发人员不知道
键
的作用，他们试图通过“从不使用索引”之类的过度简化来蒙混过关。如果您了解
键
的作用，那么确定特定值的选择是否合适应该相对容易。