Al hacer clic en el botón, quiero actualizar la lista de elementos. El botón se activa en un componente hermano. El método de vigilancia solo se llama una vez. Pero necesito una actualización constante
Elemento padre.
<template> <div class="container"> <Filter @changedKeywords="reloadItems"></Filter> <List :platforms="platforms" :filters="keywords"></List> </div> </template> <script> imports... export default { name: "Holder", components: {Filter, List}, methods: { reloadItems: function (data){ if(data.keywords) {this.keywords = data.keywords}; } }, data(){ return { keywords : null, } } } </script>Quiero volver a dibujar niño este elemento varias veces, en cada clic de botón (filtro)
<template> <section class="list"> <div class="container"> <div class="holder"> <Game v-for="data in list" :key="data.id" :data="data" /> </div> </div> </section> </template> <script> import Game from "./Game"; export default { name: "List", props: ['filters', 'platforms'], components: {Game}, data() { return{ list: [], } }, watch: { filters: async function() { console.log('gets called only once!!!'); // this is where I want to fetch new items const res = await fetch('/api/game/list/9', { method: 'POST', body: JSON.stringify({'filters' : this.filters}) }); this.list = await res.json(); } }, } </script>Cuando observa objetos y matrices, necesita usar un observador profundo.
watch: { filter: { deep: true, async handler(next, previous) { //your code here } } } Las primitivas de Javascript se almacenan por valor, pero los objetos (incluidos los arreglos, que son un tipo especial de objeto) se almacenan por referencia. Cambiar el contenido de un Objeto no cambia la referencia, y la referencia es lo que se está viendo. Pasar de null a alguna referencia de objeto es un cambio observable, pero los cambios posteriores no lo son. Cuando usa un observador profundo, detectará cambios anidados.