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 }}

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

因此，我应该在哪里调用我的filterMedia函数以访问activeCategories中的更新值？

谢谢你的帮助。

最佳答案

尝试onchange事件:

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