javascript - Vue 列表在排序后不会“正确”重新渲染

Question

下面的排序逻辑非常简单：
1. 标记不包含所选排序值
的产品 2. 按所选排序值的数量降序对产品进行排序
3. 隐藏不包含所选排序值的产品

我添加了简单的排序逻辑，它可以对元素进行排序（可以在控制台中预期）

当前问题：
列表呈现到页面的方式实际上并没有显示新的顺序，而是仅修改了少数项目的顺序。

Codepen中的实际代码

有人可以建议一种更有效的方法来实现功能，该功能还可以根据新的排序顺序正确“重新定位”页面上的元素。

PS：如果您选择iron例如，控制台中的输出与呈现到页面的列表项顺序不匹配，则可见

标签： javascriptsortingvue.js

Answer 1

products您在 html 代码中迭代以呈现产品列表的属性不是可观察的。Vue 只跟踪 observable 属性，并在每次任何一个 observables 发生变化时重新渲染。即使您正在更改产品的顺序，Vue 也不会意识到更改，因为它不是可观察的。要使products属性成为可观察的，请将其添加到数据属性中，就像您添加营养素并将其初始化为空数组一样。

使您的数据字段如下所示：

data: {
  nutrients: nutrients,
  products: []
}

请参阅此内容以更好地了解 Vue 的反应性系统的工作原理。