ラジオの選択に基づいてチェックボックスを更新するためのVue JS

Question

基本的にはthis guyと同じ質問がありますが、jQueryの代わりにVue JSを使用します。

私は、配列ensemble_groupsにバインドされ、ラジオボタンで表されるN個のグループのリストを持っています。選択した値はselected_groupにマッピングされます。

変数actor_id,actor_nameおよびgroupsを使用して、私の配列castにバインドされたアクターのリストがあります。各アクタは、任意の数のグループにあらかじめ割り当てられています。それらはチェックボックスで表され、配列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); 
      } 
     } 
    } 
}) 

ユーザーがラジオボタンをクリックするとグループに属している俳優のチェックボックスだけを選択したいと思います。だから、ユーザーが "子供"を選択した場合、 "子供"グループの俳優だけがチェックされます（私の例ではMaxとChip）。

明らかに、（グループではなく）俳優をチェックしても、残りの選択肢には影響しません。私はこれを言いますが、私はそれを部分的に働いているので、グループを選択すると正しい人が選ばれますが、私が人をクリックすると、誰もが選択解除されました。

すべてのヘルプは高く評価され

<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> 

...私はそれに私の頭を叩いてきた：グループまたは個人、及び期待される動作のいずれかをクリックすることができ、ユーザーは

はここに私のHTMLテンプレートであるということですすでにカップル日。

Answer 1

これはうまく答えるのは難しい質問ですが、私は試してみます。

私はチェックされた状態の計算されたプロパティに依存しません。 v-modelでそれを処理しましょう。あなたは

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

を行うことができますし、それらの値の変化に応じて、それはあなたのためにselected_actorsの配列を管理します。

私は少し後で答えるこれに起草上の作業と計画にだが、ここで私は、状況に近づくだろうかのフィドルです：https://jsfiddle.net/crswll/806shzzg/7/