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

Question

我在 Stack Overflow 上看到很多关于处理 Vue JS 和从数组中选择默认单个值的问题。但是，我需要将每个项目的数组 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 条目被放入两组 ["Tap dancers", "Cowboys"]，我希望这两个组的复选框在页面加载时进行检查。

帮忙？

更新：

我使用 Roy's Answer 使复选框正常工作，但我丢失了索引值以将数据保存在正确的位置。续于

Answer 1

Multiple checkboxes can be bound to an array 随心所欲地工作。下面的代码片段列出了 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>

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

Use Vue JS to make default selection(s) within Array

arrays

statamic

vue.js