如何在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 测试过。