使用 Vue JS 在 Array 中进行默认选择

Question

我在 Stack Overflow 上看到很多关于 Vue JS 和从数组中选择默认 single 值的问题。但是，我需要将每个项目的数组 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>

所以我已经将我的 ALL THE GROUPS 值存储在 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 条目放入两组 ["Tap dancers", "Cowboys"]，我希望在页面加载时检查这两组的复选框。

帮助？

更新：

我已使用 Roy's Answer 使复选框正常工作，但我丢失了索引值以将数据保存在正确的位置。继续How to set incremental counter for nested arrays using Vue JS

Answer 1

Multiple checkboxes can be bound to an array 以您想要的方式工作。下面的 sn-p 列出了 ensemble_groups 旁边有复选框。在其下方，列出了 cast_groups 数组。 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>