Question

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

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

我有一个绑定到我的数组cast的actor的列表，其变量为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);
          }
        }
    }
})

当用户点击某个组的单选按钮时，我想只选择演员＆＃39;该组中的复选框。因此，如果用户选择＆＃34; Children＆＃34;，则只选择＆＃34; Children＆＃34;中的演员。应检查组（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/

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

1 个答案: