Tengo el siguiente código en el archivo _slug.vue
{{ feed }} siempre devuelve una matriz vacía. El console.log(this.feed) en las funciones de recuperación asíncrona registra los datos correctos (una matriz de tres objetos) devueltos por la llamada api (un controlador strapi personalizado). Pero, de nuevo, el feed está vacío en la propia página.
{{ category }} funciona según lo previsto, tanto en la página como en el archivo console.log dentro de la función de obtención asíncrona.
Intenté cambiar la llamada api a una que no requiere un parámetro y que funciona en otra página y todavía obtengo una matriz vacía.
¿Qué me estoy perdiendo?
<template> <div> <h1>Feed - {{ category }}</h1> <p>{{ feed }}</p> </div> </template> <script> export default { data() { return { feed: [], category: this.$route.params.slug, } }, async fetch({ params }) { const category = params.slug console.log('slug: ' + category) this.feed = await fetch( `http://localhost:1337/api/getCategory/${params.slug}` ).then((res) => res.json()) console.log(this.feed) }, } </script>El comentario de Kissu resolvió mi problema, no pasó {params} a fetch() y usó this.$route.params.slug en su lugar.
Creo que su propiedad de categoría funciona como se esperaba porque la está configurando directamente en la función de datos. En realidad, no está configurando la categoría en la función de búsqueda. Creo que su problema es que la función de búsqueda no se coloca en la propiedad "métodos". Intente refactorizar el código de la siguiente manera: (tenga en cuenta la función de búsqueda colocada en el objeto de métodos)
<template> <div> <h1>Feed - {{ category }}</h1> <p>{{ feed }}</p> </div> </template> <script> export default { methods: { async fetch({ params }) { const category = params.slug; console.log("slug: " + category); this.feed = await fetch(`http://localhost:1337/api/getCategory/${params.slug}`).then((res) => res.json()); console.log(this.feed); }, }, data() { return { feed: [], category: this.$route.params.slug, }; }, }; </script>Debe usar fetch() sin nada dentro de () ; de lo contrario, usará la búsqueda anterior como se explica aquí: stackoverflow.com/a/68820416/8816585
Acceda a los parámetros a través de this.$route.params.slug .