Hi guys
I have the next enviroment:
/pages/
-------/_slug
-------------/index.vue
-------------/_slug.vue
-------/search
---------------/_slug.vue
I have a menubar in layout default.vue
that searches the entries. When I search any word I make a this.$router.push('/search/' + words)
in the code, next, in /search/_slug.vue
I get the slug as params.slug
in asyncData
and search in store entries related with these words.
<template>
<div>
<strong class="display-1">Buscando.... {{slug}}</strong>
<v-divider class="my-2 indigo" style="height: 3px"></v-divider>
<Entradas :entradas="entries" />
</div>
</template>
<script>
:
:
async asyncData ({params, store}) {
let entradas = await store.dispatch('entries/searchEntries', params.slug)
console.log(entradas)
return {
slug: params.slug,
entries: entradas
}
},
But at the first time, it shows me all entries that match with the store, but when I continue writing more words (searching), the slug of the navigator keep changing (params.slug
), entradas
also change, but entries
or this.entries
in the model stay the same, it happens also with this.slug
, they doesn't change the template. asyncData
isn't reactive.
How can I make reactive these vars?
<!--cmty--><!--cmty_prevent_hook--><div align="right"><sub><em>This question is available on <a href="https://nuxtjs.cmty.io">Nuxt.js</a> community (<a href="https://nuxtjs.cmty.io/nuxt/nuxt.js/issues/c674">#c674</a>)</em></sub></div>