Vue.js计算属性和jQuery UI可排序问题

Question

在我的项目中，我有一个包含三个ul列表的组件。我也有一些带有项目的数据数组，每个项目都有一些属性。我的目标是：

1. 将基本阵列中的项目分配到三个列表中
2. 由于每个项目都有一个告诉我们该项目属于哪个列表的属性，因此可以在列表之间拖放项目并相应地更新项目数据

我没有复制粘贴大量代码，而是尝试通过使用以下简单示例在jsfiddle中重现错误的行为：

https://jsfiddle.net/89pL26d2/4/

问题是，当您拖放时，您恰好拖动了2个项目，而不是一个。

但是，当我从计算属性切换到时watch，得到了所需的行为，并且一切正常。

我找出导致错误的行：更新项目属性时的行告诉我完成拖动后该项目应属于哪个列表。但我不知道为什么会导致这种情况

我知道这不是直接使用HTML的最佳方法，但是我现在还可以。

Answer 1

一般来说，每当我在 Vue 中看到一个问题，特别是与列表相关的问题，更新了错误的项目或类似的问题时，这都归结为 Vue 试图变得聪明，但因为没有最好的信息而出错了。这几乎总是通过使用key.

建议尽可能使用 v-for 提供键，除非迭代的 DOM 内容很简单，或者您有意依赖默认行为来提高性能。

钥匙。

<div id="app">
  <div>
    <ul id="listA" data-list="A" class="connectedSortable">
      <li v-for="item in listAFiltered" :key="item.id" :data-id="item.id">{{ item.title }}</li>
    </ul>

    <ul id="listB" data-list="B" class="connectedSortable">
      <li v-for="item in listBFiltered" :key="item.id" :data-id="item.id">{{ item.title }}</li>
    </ul>
  </div>
</div>

添加密钥可以解决您的问题。