Checkbox Vue JS用于根据无线电选择更新复选框

我的问题基本上与相同，但使用Vue JS而不是jQuery

我有一个N个组的列表绑定到我的数组

集合\u组

，并用单选按钮表示。选定值映射到

选定组

我有一个绑定到我的数组

cast

的演员列表，其中包含变量

actor\u id

、

actor\u name

和

组。每个参与者被预先分配到任意数量的组。它们由复选框表示，并映射到数组
可见\u actors
（选中时）

下面是我的Vue JS为上述数据提供动力（我想这个方法都被提升了，我可能需要某种类型的计算属性）：

当用户单击某个组的单选按钮时，我只想选中该组中的演员复选框。因此，如果用户选择“Children”，则只应检查“Children”组中的演员（根据我的示例，Max和Chip）

而且，很明显，检查一个演员（而不是一组演员）不应该影响其余的选择。我之所以提到这一点，是因为我在某一点上做了部分工作，在这一点上，选择一个组也选择了正确的人，但当我点击一个人时，突然其他人都被取消了选择。用户可以单击组或个人，预期的行为是

以下是我的HTML模板：

<div id="schedule-builder">
  <div class="select-groups">
    <h3>Ensemble Groups</h3>
    <template v-for="group in ensemble_groups">
      <input name="select_group[]" id="group_@{{ $index }}"
             v-model="selected_group"
             :value="group"
             @click="selectGroup"
             type="radio">
      <label for="group_@{{ $index }}">@{{ group }}</label>
    </template>
  </div>

  <div class="select-individuals">
    <h3>Cast Members</h3>
    <template v-for="person in cast">
      <input name="actors[]" id="actor-@{{ $index }}"
             v-model="visible_actors"
             :value="person.actor_id"
             :checked="visible_actors.indexOf(person.actor_id) > -1"
             type="checkbox">
      <label for="actor-@{{ $index }}">
        @{{ person.actor_name }}
      </label>
    </template>
  </div>
</div>


合奏组
@{{group}}
演员
@{{person.actor_name}

感谢您的帮助。。。这是一个很难回答的问题，但我会尽力回答

对于选中状态，我不会依赖计算属性。让
v-model
为您处理这个问题。你能行

<input 
  type="checkbox" 
  name="actors[]" 
  v-model="selected_actors" 
  :value="actor">



这将为您管理
所选参与者的数组，因为他们的值会发生变化

我正在工作，计划稍后再详细说明这个答案，但这里有一些我如何处理这种情况的技巧：
当你改变组时，所有选定的角色是否都应该是该组的一部分？是的！因此，如果用户选择一个组，然后检查一个额外的人，然后单击另一个组，那么除了最近选择的组之外，所有选择都应该被删除。谢谢，我仍在解决这个问题，我在我的第三天头部碰撞中取得了一些进展。我已禁用选定的_actors'数组，为每个actor选择了一个
checked
变量。除了组选择器之外，它现在都在工作。我想我不知道足够的JS来编写正确的方法来清除所有actor复选框，然后检查组中包含
所选组的actor
。我认为这就是你想要的，如果你想检查每个参与者的
属性。如果你在其他领域使用这个列表，它可能会变得有点棘手，因为现在检查会到处都是。这太完美了！我可能重命名变量只是为了减少重复性，但这种方法很神奇！我是如此接近。。。。我试着做每一件事，需要做每一件事。。。。另外还有一些与语法相关的东西。谢谢
<input 
  type="checkbox" 
  name="actors[]" 
  v-model="selected_actors" 
  :value="actor">