javascript - Vue列表排序后不重新渲染 "properly"

Question

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

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

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

Codepen 中的实际代码

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

P.S:例如，如果您选择iron，则可以看到控制台中的输出与呈现到页面的列表项顺序不匹配

Answer 1

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

将数据字段设置为如下所示:

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

参见this为了更好地理解 Vue 的 react 系统的工作原理。