CODEWITHSUNDEEP
javascriptvuejs2vue-component
Dende
Dende

Reputation: 584

Checkbox passes nothing to Vue object on the first click

I have a number of checkboxes looking like this

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

and I have a Vue component 

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);
            }
        }
    });

When i check a box first time, is appears to be checked on screen, but the filterParams are not updated. When i uncheck this box or check another one, the value of the first box is passed to filterParams.

What can prevent the checkbox from passing its value to params?

Upvotes: 1

Views: 1177

Answers (1)

Pankit Kapadia
Pankit Kapadia

Reputation: 1579

@click will trigger a click event and then it will ultimately trigger @change event. You are trying to check the value immediately after @click is triggered. @change is not yet triggered and so you are not getting the correct value.

Try replacing @click by @change and it should work as it will be triggered once the checkbox value is changed.

click and change event explained in detail by T.J.Crowder here

Upvotes: 2

Related Questions