Vue列表在排序后不会“正确地”重新呈现
Vue列表在排序后不会“正确地”重新呈现
提问于 2019-06-09 15:23:49
下面的排序逻辑非常简单：
- 标记不包含所选排序值的产品
- 按所选排序值的数量按降序排序产品
- 隐藏不包含所选排序值的产品
我添加了简单的排序逻辑，它可以对元素进行排序(可以在控制台中预期)。
当前问题：
列表呈现到页面的方式实际上并不显示新的订单，而是只修改少数项目的顺序。
科德芬中的实际代码
有人能建议什么是更有效的方式来实现功能，这也将适当地“重新定位”元素在页面上根据新的排序顺序。
P.S:例如，如果选择iron，控制台中的输出与呈现到页面的列表项顺序不匹配是可见的
Stack Overflow用户
回答已采纳
发布于 2019-06-09 16:17:43
在html代码中迭代以呈现产品列表的products属性是不可观察的。Vue只跟踪可观察到的属性，并在任何一个可观察到的属性发生变化时重新呈现。即使您正在改变产品的顺序，Vue并不知道这种变化，因为它是不可观察的。要使products属性成为一个可观察的属性，将其添加到数据属性中，就像添加养分一样，并将其初始化为一个空数组。
使您的数据字段如下所示：
data: {
nutrients: nutrients,
products: []
}请参阅这，以更好地理解Vue的反应性系统。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/56515840
复制相关文章
相似问题
腾讯云开发者
