Vue 3计算的属性和ref未更新页面内容

Question

我有一个Pinia商店，里面有我拉到页面卡片上的内容。有3个页面的格式相同，但内容不同，当我在页面之间切换时，我必须通过更新listref来更新内容，该引用通过计算属性filteredList传递，该属性基于当前选择的主题selectedCategory进行筛选。我遇到的问题是，尽管list是一个引用并经过计算，但页面上的内容并没有更新。

我知道listref是通过每次页面更新的控制台日志正确更新的，但我认为要么更新的内容没有通过计算的filteredList，要么它通过了过滤器，只是没有显示在页面上。

当我将listref初始化为null，然后将数据加载到onMounted()挂钩上时，它不会在页面上显示任何内容，但当我用页面的内容初始化listref时，它会在页面中显示内容，但在我尝试更改页面时，它在这两种情况下都不会更新内容。

据我所知，每个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为""，过滤器将返回未过滤的列表。

谢谢你能提供的任何帮助或见解，我已经在这件事上呆了几个小时了。

Answer 1

每次页面更新时，我都会重新分配ref，这要归功于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("/");
});