复选框在第一次单击时不会向 Vue 对象传递任何内容答案

【问题标题】：Checkbox passes nothing to Vue object on the first click复选框在第一次单击时不会向 Vue 对象传递任何内容
【发布时间】：2025-11-26 01:20:02
【问题描述】：

我有很多这样的复选框

<input :disabled="update.spinner" v-model="searchRequest.age" :value="age" type="checkbox" :id="age" @click="getFilters(searchRequest)"></input>

我有一个 Vue 组件

Vue.component('filters',{
        template:filtertemplate,
        props: ['filters', 'loadLimit','students', 'counter', 'hobbies','update','filterParams', 'filterLoaded'],
        data(){
            return{
                filteredData: this.filters,
                selectedHobbies:[],
                searchRequest:{
                    gender:[],
                    age: [],
                    hobby:[],
                }
            }
        },
        components: {
            'v-select': ('v-select', VueSelect.VueSelect)
        },
        methods:{
            getFilters: function (obj) {
                debugger
                var self = this;
                //check if filterParams empty if true encode to uri
                if(!obj == 0){studentProfiles.getDatasAsUriParameters(obj)}
            },
            sendRequest: function(counter,url) {
                var self = this;
                studentProfiles.counter = 0;
                studentProfiles.students = [];
                studentProfiles.update.spinner = true;
                studentProfiles.getData(counter,url,this.filterParams);
            }
        }
    });

当我第一次选中一个框时，屏幕上似乎已选中，但 filterParams 没有更新。当我取消选中此框或选中另一个框时，第一个框的值将传递给 filterParams。

什么可以阻止复选框将其值传递给参数？

【问题讨论】：

你试过@change而不是@click吗？
@PankitKapadia，非常感谢。我现在试过了，它有帮助。如果你把它写成一个更详细一点的答案，我会接受它。
当然。添加了参考链接，您可以在其中获得有关这两个事件的详细说明。 :)

标签： javascript vuejs2 vue-component

【解决方案1】：

@click 会触发点击事件，然后最终会触发@change 事件。您正尝试在触发 @click 后立即检查该值。 @change 尚未触发，因此您没有得到正确的值。

尝试将@click 替换为@change，它应该可以工作，因为它会在复选框值更改后被触发。

click和change事件由T.J.Crowder here详细解释

【讨论】：