gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-28 14:18:10 30 4
gpt4 key购买 nike

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

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

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

Codepen 中的实际代码

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

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

最佳答案

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

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

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

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

关于javascript - Vue列表排序后不重新渲染 "properly",我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56515840/

30 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com