When on button click I want to refresh list of items. Button is trigger on a sibling component. Watch method only gets called once. But I need a constant refresh
Parent element.
<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>
I want to redraw child this element multiple times, on each (filter)button click
<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>
When you're watching objects and arrays you need to use a deep watcher.
watch: {
filter: {
deep: true,
async handler(next, previous) {
//your code here
}
}
}
Javascript primitives are stored by value, but Objects (including Arrays which are a special kind of Object) are stored by reference. Changing the contents of an Object doesn't change the reference, and the reference is what is being watched. Going from null to some object reference is an observable change, but subsequent changes aren't. When you use a deep watcher it will detect nested changes.