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

Question

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

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

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

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

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

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

我找出导致错误的行:当我更新项目属性时告诉我拖动完成后项目应该属于哪个列表的行。但是我想不通为什么会这样

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

Answer 1

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

It is recommended to provide a key with v-for whenever possible, unless the iterated DOM content is simple, or you are intentionally relying on the default behavior for performance gains.

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>

添加 key fixes your issue .