javascript - VueJS Master Checkbox 切换数组值

Question

我正在使用 VueJS，但在一系列复选框上实现两个功能时遇到了问题。

• 首先，我的复选框是动态构建的。
• 我需要实现一个主“切换”复选框，单击该复选框会选中或取消选中所有其他复选框。
• 我需要在模型中保留一系列选中的项目。

此脚本为我提供了切换复选框，但未填充“checkedNames”数组。我已尝试将 v-model 添加到名称复选框，但它只是检查了所有内容，但仍未填充数组。

new Vue({
  el: '#boxes',
  data: {
    checked: null,
    checkedNames: [],
    teams: [{
        name: 'team a',
        id: 'team-a',
        checked: null,
        members: [{
            'id': 1,
            'name': 'Dave'
          },
          {
            'id': 2,
            'name': 'Dee'
          },
          {
            'id': 3,
            'name': 'Dozy'
          },
          {
            'id': 4,
            'name': 'Beaky'
          },
          {
            'id': 5,
            'name': 'Mick'
          },
          {
            'id': 6,
            'name': 'Tich'
          }
        ]
      },
      {
        name: 'team b',
        id: 'team-b',
        checked: null,
        members: [{
            'id': 7,
            'name': 'John'
          },
          {
            'id': 8,
            'name': 'Paul'
          },
          {
            'id': 9,
            'name': 'George'
          },
          {
            'id': 10,
            'name': 'Ringo'
          }
        ]
      }
    ]
  }
});

<div id='boxes'>
  <ul>
    <li v-for="team in teams" style="width: 100px; float:left">
      <div>
        <input type="checkbox" class="form-check form-check-inline" v-bind:id="team.id" v-model="team.checked">
        <label v-bind:for="team.id"><strong>{{ team.name }}</strong></label>
      </div>
      <ul class="countries_list">
        <li v-for="member in team.members">
          <input type="checkbox" class="form-check form-check-inline" v-bind:id="member.id" v-bind.checked="{checked : team.checked}">
          <label v-bind:for="member.id">{{ member.name }}</label>
        </li>
      </ul>
    </li>
  </ul>
  <br>
  <span>Checked names: {{ checkedNames }}</span>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

https://jsfiddle.net/50wL7mdz/133578/

有人能给我指出正确的方向吗？

Answer 1

我的看法:

1.为每个成员添加了'checked'属性。

2.为每个成员用v-model="member.checked"绑定(bind)每个成员的checkbox

3.为团队复选框绑定(bind)'change'事件，如果点击，为每个成员设置member.checked=team.checked

4. 将 checkedNamed 转换为计算属性，使用 for-loop 或 reduce 打印出所有成员都已检查。

new Vue({
  el: '#boxes',
  computed: {
    computed_checkedNames: function() {
      let temp = '';
      for(teamIndex in this.teams) {
        temp += '[team=' + this.teams[teamIndex].name + ']{'
        for(memberIndex in this.teams[teamIndex].members) {
          temp += this.teams[teamIndex].members[memberIndex].checked ? this.teams[teamIndex].members[memberIndex].name + ',' : ''
        }
        temp += '},'
      }
      
      return temp
    }
  },
  data: {
    checked: null,
    //checkedNames: [],
    teams: [{
        name: 'team a',
        id: 'team-a',
        checked: false,
        members: [{
            'id': 1,
            'name': 'Dave',
            checked: false
          },
          {
            'id': 2,
            'name': 'Dee',
            checked: false
          },
          {
            'id': 3,
            'name': 'Dozy',
            checked: false
          },
          {
            'id': 4,
            'name': 'Beaky',
            checked: false
          },
          {
            'id': 5,
            'name': 'Mick',
            checked: false
          },
          {
            'id': 6,
            'name': 'Tich',
            checked: false
          }
        ]
      },
      {
        name: 'team b',
        id: 'team-b',
        checked: null,
        members: [{
            'id': 1,
            'name': 'John',
            checked: false
          },
          {
            'id': 2,
            'name': 'Paul',
            checked: false
          },
          {
            'id': 3,
            'name': 'George',
            checked: false
          },
          {
            'id': 4,
            'name': 'Ringo',
            checked: false
          },
          {
            'id': 6,
            'name': 'Tich',
            checked: false
          }
        ]
      }
    ]
  }
});

<div id='boxes'>
  <ul>
    <li v-for="team in teams" style="width: 100px; float:left">
      <div>
        <input type="checkbox" class="form-check form-check-inline" v-bind:id="team.id" v-model="team.checked" v-on:change="team.members.forEach(function(value, key){value.checked=team.checked});">
        <label v-bind:for="team.id"><strong>{{ team.name }}</strong></label>
      </div>
      <ul class="countries_list">
        <li v-for="member in team.members">
          <input type="checkbox" class="form-check form-check-inline" v-bind:id="member.id"  v-model="member.checked">
          <label v-bind:for="member.id">{{ member.name }}</label>
        </li>
      </ul>
    </li>
  </ul>
  <br>
  <span style="background-color:#8d9bb2">Checked names: {{ computed_checkedNames }}</span>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>