英文:
Why is my dynamic Vue 3 page not reloading its content on page change?
问题
我有以下的Vue3模板文件，从Strapi获取数据。它在我的本地机器上工作，但是当我在线运行它时，内容只在第一次加载页面时加载，并且当我改变页面时不会改变（它已经设置为一个动态页面）。如果我刷新页面，就会加载正确的内容。URL也正确地改变了。
英文:
I have the following vue3 template file that fetches data from Strapi. It works on my local machine but when I run it online the content only loads on first page load and doesn't change when I change the page (It's all set up with one dynamic page). If I refresh the page the correct content is loaded. The URL also changes correctly.
<template><div v-if="!pending">{{ route.params.slug }}<div v-if="project.data[0]"><Head><Title>{{ project.data[0].attributes.title }} / Tuomoas Markunpoika</Title></Head><div id="hero"><img:src="`${config.public.strapiURL}${project.data[0].attributes.preview.image.data.attributes.url}`"/></div><ContentBlocks :blocks="project.data[0].attributes.content" /><h2 v-if="project.data[0].attributes.items.data.length" class="main-heading">Collection</h2><ItemGrid v-if="project.data[0].attributes.items.data.length" :overview="`projects`" :selection="`${route.params.slug}`" /></div></div></template><script setup>const route = useRoute()const config = useRuntimeConfig()const { data: project, pending } = await useAsyncData("project", () =>$fetch(`${config.public.strapiURL}/api/projects/?filters[slug][$eq]=${route.params.slug}&populate[meta][populate]=*&populate[preview][populate]=*&populate[content][populate]=*&populate[items]=*`))if (!project.value || Object.keys(project.value.data).length === 0) {throw createError({ statusCode: 404, statusMessage: "Page Not Found" })}</script>
答案1
得分: 1
你想使用一个观察者，在参数变化时重新请求数据。在你的情况下，可以像这样实现：```javascriptconst route = useRoute()// 当参数变化时获取用户信息watch(() => route.params.slug,async (newslug) => {// 获取数据},);
更多信息：在设置函数内部访问路由和当前路由
<details><summary>英文:</summary>You want to use a watcher that re-requests data when params change. So that can be something like this in your case:```javascriptconst route = useRoute()// fetch the user information when params changewatch(() => route.params.slug,async (newslug) => {// fetch data},);
More info: Accessing the Router and current Route inside setup
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论