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

我通过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
        }
    }
}

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

最佳答案

您可以遍历选定的数组以使所有索引都为true，但是在第一次使用时，您必须从其他来源而不是选定的数组中获取复选框的长度。（我在这里使用refs来计数复选框）

该代码将如下所示

<v-checkbox
  ref="n"
  v-model="selected[n]"
></v-checkbox>


select_All(e){
        if(e == true)
        {
          this.$refs.n.forEach((val, index) => this.selected[index] = true)
        } else {
            this.$refs.n.forEach((val, index) => this.selected[index] = false)
        }
    }