Javascript VueJS复选框更新

我对VueJS状态有点熟悉

这是我的简单应用程序：

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();
        }
    }
});

还有一些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 }}

我的猫1
@{{activeCategories}}

当我选中复选框时，模板会正确地显示带有“i1”的@{{activeCategories}。但是console.debug（this.activeCategories）显示一个空数组。我必须将该调试放入更新的方法中，以获得正确的值。但是如果我这样做，我不能调用一个改变数据的方法，否则我将进入一个无限循环

那么，我应该在哪里调用我的filterMedia函数才能从activeCategories访问更新的值呢

---

感谢您的帮助。

尝试

onchange

事件：

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