I'm struggling a bit with VueJS states.
Here is the setup for my simple app:
new Vue({
el: '#media-app',
data: {
activeTypes: [],
activeCategories: [],
medias: []
},
methods: {
getFilteredData: function () {
// some calculations required
// update Vue
Vue.set(me, "medias", []);
},
filterMedia: function () {
console.debug(this.activeCategories);
console.debug(this.activeTypes);
this.getFilteredData();
}
}
});
Additionally, here's some HTML:
<input type="checkbox" id="i1" value="i1" class="filter categories" v-model="activeCategories" v-on:click="filterMedia()">
<label for='i1'>My cat 1</label>
</div>
@{{ activeCategories }}
When I check the checkbox, the template correctly displays @{{ activeCategories }} as "i1". However, the console.debug(this.activeCategories) shows an empty array. I need to place that debug statement in an updated method to get the correct value. But if I do that, I can't call a method that changes the data without entering an infinite loop…
So, where should I invoke my filterMedia function to access updated values from activeCategories?
Thank you for your assistance.