我对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"的@{{activeCategories}.但是控制台.debug(this.activeCategories)显示一个空array.我必须将调试放入更新的方法中,以获得正确的值.但如果我这样做,我就不能调用一个改变数据的方法,否则我会进入一个无限循环…

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

谢谢你的帮助.

推荐答案

try onchange项活动:

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

Vue.js相关问答推荐

Nuxt3 Build . put文件夹保持空,没有从.nuxt复制任何内容

如何使用 vueJS 上的 ref( ) 函数创建二维数组定义?

绑定事件在渲染函数中不起作用

在 vue.js 中添加新类时样式不适用

VueJS - 将单独的组件加载到 vue 实例中

使用上传组件而不触发 POST 请求

作用域slots和 IE11 的问题

Vue:需要禁用页面上的所有输入

使用 Vue.js (cdn) 在特定元素上切换显示/隐藏

即使在客户端设置 Access-Control-Allow-Origin 或其他 Access-Control-Allow-* 标头后也出现 CORS 错误

从 Url 中删除查询字符串参数

如何在 Vue 3 中使用 SSR

Laravel 事件未广播

Vue Prop 没有初始化器,也没有在构造函数中明确赋值

Vue 组件 Vue-Instant

Vuetify 2 个工具栏和 1 个导航抽屉,navigation drawer导航抽屉上方有 1 个工具栏

在手动安装的 vue 组件中使用 vuex

带有后退按钮的 Vue.js 路由

使用 Spring Boot(VueJS 和 Axios 前端)禁止发布 403 帖子

如何订阅store 模块