Событие изменения не вызывается при изменении проверенного значения с помощью ref

Question

Я пытался создать функцию select all. Ниже мой компонент,

(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 {{i}}</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);
})();

var app = new Vue({
  el: '#app',
  data: {
  },
  methods:{ 
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> 
<script src="https://underscorejs.org/underscore-min.js"></script> 

</style> 
<div id="app">  
	<sample />
</div>

Когда я проверял / снимал флажок, вызывается любая функция checbox changedSelection. Но когда я установил / снял флажок all, флажки устанавливаются, но соответствующая функция changedSelection не вызывается.

Почему changedSelection не вызывается, когда изменение производится через ref ??

Answer 1

Вместо этого установите новый элемент в данных Vue и используйте связывание с v-model="selection"

new Vue({
  el:'#app',
  data:{
    rows:[{id:1,sel:false},{id:2,sel:false},{id:3,sel:false},{id:4,sel:false},{id:5,sel:false}],
    selection:false,
    selAll:false
  },
  methods:{
    changedSelection:function(i){
        console.log(i.id +" is "+ (i.sel?' checked ': 'unchecked') );
    },
    changedAllSelection:function(){
        for(let i in this.rows){
          this.rows[i].sel = this.selAll;
          console.log(this.rows[i].id +" is "+ (this.rows[i].sel?' checked ': 'unchecked') );
        }
        console.log("Select All : " + this.selAll);
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<div>
<input type="checkbox" ref="select" v-model="selAll" @change="changedAllSelection" />Selection All : {{(selAll?' checked ': 'unchecked')}}
<div v-for="i in rows">
<input type="checkbox" ref="select" v-model="i.sel" @change="changedSelection(i)" />Selection {{i.id}} : {{(i.sel?' checked ': 'unchecked')}}
</div>
</div>
</div>