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

您可以循环遍历所选数组以使所有索引都为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)
        }
    }

Answer 2

以下是在这种情况下使用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进行测试。

Answer 3

我这样使用它来选择/取消选择多个动态生成的复选框：

    <v-checkbox v-model="selected" @click.native.stop="selectAll()" />
    <v-checkbox v-model="checkbox[0]" class="checkbox" @click.native.stop />
    <v-checkbox v-model="checkbox[1]" class="checkbox" @click.native.stop />
    <v-checkbox v-model="checkbox[2]" class="checkbox" @click.native.stop />
    <v-checkbox v-model="checkbox[3]" class="checkbox" @click.native.stop />
    <v-checkbox v-model="checkbox[4]" class="checkbox" @click.native.stop />

上面的复选框可以动态生成。我使用（不是这种情况）v-for循环代码块作为API ID的索引。

new Vue({
  el: '#app',
  data: {
    checkbox: {},
    selected: false
  },
  mounted () {
    /* this is just example, in this case you could type number properties 
    directly in data.checkbox like checkbox[0] = false etc., but in a real case 
    you may want to use string ID or any API based index with it's corresponding 
    v-for html markdown */
    for (let i = 0; i < 5; i++) {
      // maintaining reactivity
      this.$set(this.checkbox, i, false)
    }
  },
  methods: {
    selectAll () {
      for (const i in this.checkbox) {
        this.checkbox[i] = this.selected
      }
    }
  }

})

如果需要，您可以替换mounted块

watch: {
  checkbox: {
    immediate: true,
    handler () {
      for (let i = 0; i < 5; i++) {
        // maintaining reactivity
        this.$set(this.checkbox, i, false)
      }
    }
  }
}

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

3 个答案: