VueJS checkbox update

Question

I'm a little wired with VueJS states.

This is my simple app :

new Vue({
    el: '#media-app',
    data: {
        activeTypes: [],
        activeCategories: [],
        medias: []
    },
    methods: {
        getFilteredData: function () {
            // some computing needed
            // refresh vue 
            Vue.set(me, "medias", []);
        },

        filterMedia: function () {
            console.debug(this.activeCategories);
            console.debug(this.activeTypes);
            this.getFilteredData();
        }
    }
});

And some HTML stuff:

<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 displays @{{ activeCategories }} correctly with "i1". But the console.debug(this.activeCategories) displays an empty array. I have to put that debug into an updated method to get the correct value. But if I do that, I cannot call a method which change the data or I'll get into an infinity loop…

So, where should I call my filterMedia function to be able to access updated values from activeCategories ?

Thanks for your help.

Answer 1

Try the onchange event:

<input type="checkbox" id="i1" value="i1" class="filter categories" 
       v-model="activeCategories" v-on:change="filterMedia()">