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