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

在我的项目中，我有一个包含三个

ul

列表的组件。此外，我还有一些数据数组，其中包含一些项，每个项都有一些属性。我的目标是：

将基本数组中的项分配到三个列表中

可以在列表之间拖放项目，并相应地更新项目数据，因为每个项目都有一个属性告诉我们该项目属于哪个列表

我没有复制粘贴大量代码，而是尝试使用下面的简单示例再现JSFIDLE中的错误行为：

问题是，当你拖放时，你只拖动了两个项目，而不是一个

然而，当我从computed properties切换到

watch

时，我得到了所需的行为，一切正常

我找出了导致错误的行：当我更新item属性时，该行告诉我拖动完成后该项应属于哪个列表。但我不明白为什么会这样

---

我知道这不是直接使用HTML的最佳方式，但我现在对此没有意见。

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

键来解决

建议尽可能提供带v-for的钥匙，
除非迭代的DOM内容很简单，或者您有意
依靠默认行为获得性能提升




{{item.title}


{{item.title}


添加密钥。
如果有问题，我不理解。但是您可以使用VueJS Sortable：同意上面的说法。只要使用为vue设计的东西，而不是到处组合jQuery的东西
<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>