vue：计数和检查复选框

Question

我想用vue做什么：

计数选中的复选框
将所有复选框设置为选中（或全部取消选中）

这是一个非常简化的模型。真实网站包含以下约束：

复选框的数量发生变化。
值总是不同的。
我不想将所有输入属性放入 Vue

以下代码可以计算选中复选框的数量。

<html>
  <body>
    <script src="https://unpkg.com/vue"></script>
    <div id="app">
      <input type="checkbox" name="abc" value=1 v-model="cch">
      <input type="checkbox" name="abc" value=2 v-model="cch">
      <br/>
      Count: {{cch.length}}
    </div>

    <script>
      new Vue({
          el: '#app',
          data: {
            cch: [],
          },
      })
    </script>
  </body>
</html>

以下代码检查所有复选框（当然，如果 chk=false，则取消选中复选框）：

<html>
  <body>
    <script src="https://unpkg.com/vue"></script>
    <div id="app">
      <input type="checkbox" name="abc" value=1 :checked="chk">
      <input type="checkbox" name="abc" value=2 :checked="chk">
      <br/>
      Checked: {{chk}}
    </div>

    <script>
      new Vue({
          el: '#app',
          data: {
            chk: true
          },
      })
    </script>
  </body>
</html>

似乎无法在同一个输入标签中使用 :checked 和 v-model。我能做什么？

我添加了一个按钮来选中所有复选框，并且更改了名称。问题仍然存在：计数正常，但 "all" 按钮没有任何效果。

<html>
  <body>
    <script src="https://unpkg.com/vue"></script>
    <div id="app">
      <input type="checkbox" name="abc1" value=1 v-model="cch" :checked="chk">
      <input type="checkbox" name="abc2" value=2 v-model="cch" :checked="chk">
      <br/>
      Count: {{cch.length}}
      <br/>
      <input type="button" @click="chk=!chk" value="all">
    </div>

    <script>
      new Vue({
          el: '#app',
          data: {
            cch: [],
            chk: true
          },
      })
    </script>
  </body>
</html>

Answer 1

您需要为每个复选框设置唯一的名称属性。这样他们就可以正确地使用 v-model。

vue：计数和检查复选框

vue: Count and check checkboxes

checkbox

count

checked

vue.js