首页 文章

VueJS复选框更新

提问于
浏览
4

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

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

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

谢谢你的帮助 .

1 回答

  • 4

    试试 onchange 事件:

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

相关问题