0

我在 Stack Overflow 上看到了很多关于 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 条目被放入两个组["Tap dancers", "Cowboys"]中，我希望在页面加载时检查这两个组的复选框。

帮助？

更新：

我已经使用 Roy's Answer 使复选框起作用，但我丢失了索引值以将数据保存在正确的位置。继续阅读如何使用 Vue JS 为嵌套数组设置增量计数器

4

1 回答 1

1

多个复选框可以绑定到一个数组以按照您想要的方式工作。下面的代码片段列出了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>

于 2016-09-21T18:06:20.270 回答