Vue JS 用于根据单选选择更新复选框

Question

我基本上和this guy有同样的问题，但是使用Vue JS而不是jQuery。

我有一个绑定到我的数组ensemble_groups 并由单选按钮表示的 N 个组的列表。所选值映射到selected_group。

我有一个绑定到我的数组 cast 的演员列表，其中包含变量 actor_id、actor_name 和 groups。每个参与者都被预先分配给任意数量的组。它们由复选框表示并映射到数组visible_actors（选中时）。

这是我的 Vue JS 为上述数据提供动力（我想该方法已全部完成，我可能需要某种计算属性）：

new Vue({
    el: '#schedule-builder',

    data: {
      selected_group: 'Entire Cast',
      visible_actors: [],

      ensemble_groups: [
        "Entire Cast",
        "Leads",
        "Dancers",
        "Children",
        "Deselect All",
      ],

      cast: [
        {
          actor_id: "123",
          actor_name: "Carl",
          groups: ["Entire Cast","Leads",],
        },
        {
          actor_id: "234",
          actor_name: "Max",
          groups: ["Entire Cast","Leads","Children",],
        },
        {
          actor_id: "345",
          actor_name: "Sheryl",
          groups: ["Entire Cast","Dancers",],
        },
        {
          actor_id: "456",
          actor_name: "Chip",
          groups: ["Entire Cast","Children",],
        },
      ],
    },
    methods: {
      selectGroup: function() {
        // uncheck all
        visible_actors=[];
        // add people in this group to visible_actors
        for person in cast {
          if (person.groups.indexOf(selected_group) > -1) {
            visible_actors.push(person.actor_id);
          }
        }
    }
})

当用户单击某个组的单选按钮时，我只想选择该组中演员的复选框。因此，如果用户选择“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>

感谢任何帮助...我已经为此苦苦挣扎了几天。

Answer 1

这是一个很难回答的问题，但我会尝试。

对于选中状态，我不会依赖计算属性。让v-model 为您处理。你可以这样做

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

这将为您管理 selected_actors 的数组，因为它们的值发生变化。

我正在工作，并计划稍后再详细说明这个答案，但这是我如何处理这种情况的一个小窍门：https://jsfiddle.net/crswll/806shzzg/7/