Why is my dynamic Vue 3 page not reloading its content on page change?

Question

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>

score 1 · Accepted Answer · answered May 13 '23 at 16:38

You want to use a watcher that re-requests data when params change. So that can be something like this in your case:

const route = useRoute()

// fetch the user information when params change
watch(
    () => route.params.slug,
    async (newslug) => {
        // fetch data
    },
);

More info: Accessing the Router and current Route inside setup

Why is my dynamic Vue 3 page not reloading its content on page change?

1 Answers1