vendredi 7 septembre 2018

Change event is not called when checked value changed using ref

I was trying to create a select all feature. Following is my component,

(function(){
    var template = ' <table>\
                        <tr>\
                            <td rowspan=2><input type="checkbox" @change="allSelectChanged"/>All</td>\
                        </tr>\
                        <tr v-for="i in rows">\
                            <td  ><input type="checkbox" ref="select" @change="changedSelection(i,$event)" />Selection </td>\
                        </tr>\
                    </table>';
    var component = { 
        template : template,
        data:function(){
            return {
                rows:5
            }
        },
        methods:{
            allSelectChanged:function(e){
                _.each(this.$refs.select,function(s){
                    s.checked = e.target.checked;
                });
            },
            changedSelection:function(i,e){
                console.log("Selection changed",i,e.target.checked);
            }
        }
    }
    Vue.component('sample', component);
})();

When I checked/unchecked any checbox changedSelection function is called. But when I checked/unchecked all checkbox, all the other check boxes are getting selected but changedSelection function is not getting called.

Why changedSelection is not called when the change is made through ref??




Aucun commentaire:

Enregistrer un commentaire