Question

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

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

我尝试使用简单的示例在jsfiddle中重现不正确的行为，而不是复制粘贴很多代码：

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

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

但是，当我从计算属性切换到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。

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

1 个答案: