vue定义在computed的变量无法更新

最新推荐文章于 2024-08-03 15:18:43 发布

reisaru

最新推荐文章于 2024-08-03 15:18:43 发布

阅读量6.6k

点赞数

分类专栏：前端 vue 文章标签： vue

本文链接：https://blog.csdn.net/qq_41337100/article/details/106043766

版权

在Vue的详情页面中，通过路由参数加载items数组中的商品信息。首次加载正常，但后续切换商品时，数据未实时更新，仍显示旧商品信息。问题出在computed属性的缓存特性，即使this.focus和this.idx改变，item并未更新。原因是使用了keepalive路由设置，导致页面不会被销毁。解决方案是将keepalive设为false，确保每次切换商品时页面重新渲染。

摘要由CSDN通过智能技术生成

情境是这是线上商城的详情页面，商品详情是items数组，点击分类页面的商品，路由跳转到详情页面，路由参数是商品在items中的序号。
但是问题是只有第一次点击商品i的时候可以正常加载items[i]的数据到html中，退出后点击商品j，发现加载的还是商品i的信息，只有刷新后才会更新成商品j的信息。
部分代码：

        <shopPanel
            :key = "nums"
            :goodname="item.text"
            :tag="item.tag"
            :sale="item.sale"
            :price