Question

我看到很多关于Stack Overflow处理Vue JS并从Array中选择默认单个值的问题。但是，我需要将每个项目的数组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的答案让复选框工作，但我丢失了索引值以保持数据在正确的位置。继续How to set incremental counter for nested arrays using Vue JS

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中进行默认选择

1 个答案: