0

Vue JS を扱い、配列からデフォルトの単一値を選択するスタック オーバーフローについて、多くの質問を目にします。groupsただし、各アイテムの配列を ALL THE GROUPSの配列と比較しensemble_groups、デフォルトで正しい選択をロードする必要があります。

これが私が今これをやろうとしている方法です：

<div id="oven">
    <template v-for="biscuit in oven">
            <!--show checkbox for every available group-->
            <!--check groups array to see if this ensemble_group should be selected by default-->
            {{ ensemble_groups }} 
              <input type="checkbox"
                name="cast_list[@{{ $index }}][groups][]"
                :checked="biscuit.groups.IndexOf(name) == {{ group_name }}"
                value="{{ group_name }}"
                      id="g-@{{ $index }}-{{ group_name|slugify }}">
              <label for="g-@{{ $index }}-{{ group_name|slugify }}">{{ group_name }}</label>
              <br>
            {{ /ensemble_groups }}
    </template>
</div>

したがって、すべてのグループの値がYAMLに保存されていますensemble_groups.group_name

YAML に保存されている定義済みの値と一致します。cast_list.groups.value

そして、私の Vue.js 配列は次のoven.groups.nameようにそれらを格納しています:

new Vue({
  el: '#oven',

  data: {
    oven: [
      {{ cast_list }}
        {
          groups: [
            {{ groups }}
              {
                name: "{{ value }}"
              },
            {{ /groups }}
          ],
        },
      {{ /cast_list }}
    ]
  }
})

私は理にかなっていますか？配列を比較しています（複数の定義済みと利用可能なすべて）。

したがって、次のような 4 つの ensemble_groups 値が["Ballroom dancers", "Tap dancers", "Farmers", "Cowboys"]あり、cast_list エントリが 2 つのグループに配置され["Tap dancers", "Cowboys"]ている場合、ページの読み込み時にこれら 2 つのグループのチェックボックスをオンにする必要があります。

ヘルプ？

アップデート：

Roy's Answer を使用してチェックボックスを機能させましたが、データを適切な場所に保持するためのインデックス値を失いました。Vue JS を使用してネストされた配列のインクリメンタル カウンターを設定する方法に続きます。

4

1 に答える 1

1

複数のチェックボックスを配列にバインドして、必要に応じて機能させることができます。以下のスニペットは、ensemble_groups横にチェックボックスがあるリストを示しています。その下にcast_groups配列が表示されます。配列は 1 つの値で開始されますが、タイマーはプログラムによって値を追加し、最初のcast_groups値を削除して、データの変更に応答することを確認できます。チェックボックスをクリックしてメンバーシップを切り替えることもでき、cast_groupsそれに応じて変更されます。

const v = new Vue({
  el: 'body',
  data: {
    ensemble_groups: ["Ballroom dancers", "Tap dancers", "Farmers", "Cowboys"],
    cast_groups: ['Tap dancers']
  }
});

setTimeout(() => {
  v.cast_groups.push('Farmers');
}, 2000);

setTimeout(() => {
  v.cast_groups.$remove('Tap dancers');
}, 3500);
<script src="//cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.min.js"></script>
<div v-for="group in ensemble_groups">
  <input type="checkbox" value="{{group}}" v-model="cast_groups">{{group}}
</div>
<ul>
  <li v-for="group in cast_groups">{{group}}</li>
</ul>

于 2016-09-21T18:06:20.270 に答える