排序后，Vue列表未“正确”重新呈现

Question

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

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

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

Codepen中的实际代码

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

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

Answer 1

您正在html代码中进行迭代以呈现产品列表的products属性是不可观察的。 Vue仅跟踪可观察的属性，并且每当任何一个可观察的变化时都会重新渲染。即使您要更改产品的顺序，Vue也不知道更改，因为它是不可观察的。要使products属性成为可观察的属性，就如同添加营养并将其初始化为空数组一样，将其添加到data属性中。

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

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

请参阅this，以更好地了解Vue的反应系统的工作原理。