如何在vuetify中选中一个复选框上的所有复选框？答案

【问题标题】：How to check all checkbox on checking one checkbox in vuetify?如何在vuetify中选中一个复选框上的所有复选框？
【发布时间】：2020-01-05 04:54:52
【问题描述】：

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

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

【问题讨论】：

标签： javascript vue.js vuetify.js

【解决方案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 测试过。

【讨论】：

【解决方案2】：

您可以遍历选定的数组以使所有索引为真但是在第一次，您必须从其他来源而不是选定的数组获取复选框的长度。（我正在使用 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)
        }
    }

【讨论】：

感谢您的回复，但我收到错误 ['forEach' of undefined ]。如果我控制台控制台.log(this.$refs.n) 这给出未定义。
糟糕，您不需要在 ref="n" 前面加冒号，已编辑。
谢谢，它有效。这正是我想要的。我还有一件事要问您是否可以提供帮助，例如我们如何将 ref 值从一个组件传递到另一个组件？
太好了 :)，要将任何值传递给其他组件，您可以在其他组件中定义一个 prop 并传递该 prop 中的值。例如类似这样的
啊，谢谢夸奖。是的，如果可以的话，我当然很乐意提供帮助:)

【解决方案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)
      }
    }
  }
}

【讨论】：