Vuejs 计算属性和 jquery ui 可排序问题

Question

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

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

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

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

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

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

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

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

Answer 1

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

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

Key.

<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>

添加密钥fixes your issue。