Vue Rendering

by Robodude

HTML

<div id="app">
  
  <input type="checkbox" id="all" v-model="selectAll">
  <label for="all">All</label>
  
  <div>
    <div v-for="row in rows">
      <input type="checkbox" :id="row.id" v-model="row.selected">
      <label :for="row.id">{{row.id}}</label>
    </div>
  </div>
  
</div>

JavaScript

let rows = [];
for (let i = 0; i < 10000; i++){
	rows.push({
  	id: i,
    selected: false
  });
}

var app = new Vue({
  el: '#app',
  data: {
    rows: rows,
    selectAll: false
  },
  watch:{
  	selectAll(newVal){
      this.rows.forEach(x=> { x.selected = newVal });
    }
  }
});