javascript - 如何在选中 vuetify 中的一个复选框时选中所有复选框？

Question

我通过for循环动态创建了5个复选框

<v-checkbox 
    v-model="selectAll"
    label="Select All"
    @change="select_All($event)"
></v-checkbox>

<template v-for="n in 5">
    <v-checkbox 
       v-model="selected[n]"
    ></v-checkbox>
</template>

在脚本中

data(){
    return{
        selected:[],
                selectAll: false
    }
},
methods:{
    select_All(e){
        if(e == true)
        {
            // check all the checkbox
        } else {
            // uncheck all the checkbox
        }
    }
}

这就是我动态创建复选框的方式，(如果您对如何创建动态复选框有更好的建议，请告诉我) 现在我上面有一个复选框，如果我单击(选中)该复选框，则应该选中下面的所有复选框，反之亦然。

Answer 1

下面是一个使用 computed 的例子:

new Vue({
  el: '#app',
  data: {
    selected: [],
    count: 5
  },
  computed: {
    selectedAll: {
      set(val) {
        this.selected = []
        if (val) {
          for(let i = 1; i <= this.count; i++) {
            this.selected.push(i)
          }
        }
      },
      get() {
        return this.selected.length === this.count
      }
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
 <label>
   <input type="checkbox" v-model="selectedAll" />
   Select all
 </label>
  <ul>
    <li v-for="n in count">
      <label>
        <input type="checkbox" v-model="selected" :value="n" />
        C {{ n }}
      </label> 
    </li>
  </ul>
</div>

但是我还没有通过vuetify测试过。