javascript - 第一次单击时，复选框不会向 Vue 对象传递任何内容

Question

我有很多像这样的复选框

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

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

Answer 1

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

尝试用 @change 替换 @click，它应该可以工作，因为一旦复选框值发生更改，它就会被触发。

T.J.Crowder 详细解释了

click 和 change 事件 here