Vue 3计算的属性和不更新页面内容的引用
我有一家皮尼亚商店，里面有我在一页上拉卡片的内容。有3页格式相同，但内容不同，当我在页面之间切换时，我必须通过更新list ref来更新内容，这是通过计算属性filteredList传递的，该属性根据当前选定的主题selectedCategory进行筛选。我遇到的问题是，尽管list是一个参考文件，并且正在进行计算，但是页面上的内容并没有被更新。
我知道list ref是通过每次页面更新的控制台日志正确更新的，但我认为更新的内容不是通过计算的filteredList更新的，就是通过过滤器使其不显示在页面上。
当我将list ref初始化为null，然后在onMounted()钩子上加载数据时，它不会在页面上显示任何内容，但是当我用页面的内容初始化list ref时，它会在页面上显示内容，但是当我试图更改页面时，它将不会更新内容。
据我所知，每个content.id都是唯一的，这是我从其他堆栈溢出中看到的一个常见问题。我甚至尝试过避免强制重新加载组件或创建假键来强制重新加载元素，但这些操作都没有奏效。
// list ref
var list = ref(null); // doesn't work
var list = ref(contentStore.guides); // works
// mounted hook
onMounted(() => {
console.log("mounted");
if (path.value.includes("guide")) {
list = ref(contentStore.guides);
pageType.value = "guide";
} else if (path.value.includes("resource")) {
list = ref(contentStore.resources);
pageType.value = "resource";
} else if (path.value.includes("tool")) {
list = ref(contentStore.tools);
pageType.value = "tool";
} else router.push("/");
console.log("list", list.value);
});
// updated hook
var pageType = ref(null);
onUpdated(() => {
console.log("updated");
if (path.value.includes(pageType.value)) return console.log("same page");
else console.log("different page");
if (path.value.includes("guide"))
(list = ref(contentStore.guides)), (pageType.value = "guide");
else if (path.value.includes("resource"))
(list = ref(contentStore.resources)), (pageType.value = "resource");
else if (path.value.includes("tool"))
(list = ref(contentStore.tools)), (pageType.value = "tool");
else router.push("/");
});
// filter
const selectedCategory = ref("");
var filteredList = computed(() => {
if (selectedCategory.value === "") return list.value;
else return list.value.filter((item) => item.category.includes(selectedCategory.value));
});卡片HTML
<GeneralCard
class="card"
v-for="content in filteredList"
:key="content.id"
:content="content"
/>预期的行为是，当用户加载到三个页面之一时，它从URL路径(资源、指南或工具)中获取页面类型，然后相应地获取和更新内容(list)，然后重置筛选器(filteredList)，以便selectedCategory为""，过滤器将返回未过滤的列表。
谢谢你能提供的任何帮助或见解，我已经坚持了几个小时了。
回答 1
Stack Overflow用户
发布于 2022-09-03 15:23:43
每次页面更新时，我都会重新分配引用，这要感谢Emil指出这一点。我需要更新ref.value = newContent而不是ref = ref(newContent)。以下是固定代码:)
onMounted(() => {
if (path.value.includes("guide")) {
list.value = contentStore.guides;
pageType.value = "guide";
} else if (path.value.includes("resource")) {
list.value = contentStore.resources;
pageType.value = "resource";
} else if (path.value.includes("tool")) {
list.value = contentStore.tools;
pageType.value = "tool";
} else router.push("/");
});
onUpdated(() => {
if (path.value.includes(pageType.value)) return;
if (path.value.includes("guide"))
(list.value = contentStore.guides), (pageType.value = "guide");
else if (path.value.includes("resource"))
(list.value = contentStore.resources), (pageType.value = "resource");
else if (path.value.includes("tool"))
(list.value = contentStore.tools), (pageType.value = "tool");
else router.push("/");
});https://stackoverflow.com/questions/73592457
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号