Question

我与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}}＆＃34; i1＆＃34;。但是console.debug（this.activeCategories）显示一个空数组。我必须将调试放入更新的方法以获得正确的值。但如果我这样做，我就不能称之为改变数据的方法，或者我会进入无限循环...

那么，我应该在哪里调用filterMedia函数以便能够从activeCategories访问更新的值？

感谢您的帮助。

Answer 1

尝试onchange事件：

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

VueJS复选框更新

1 个答案: