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

Question

I see a lot of questions on Stack Overflow dealing with Vue JS and selecting a default single value from an Array. I, however, need to compare each item's array groups to an array of ALL THE GROUPS ensemble_groups, and load the correct selections by default.

Here's how I'm trying to do this now:

<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>

So I've got my ALL THE GROUPS values stored in YAML as ensemble_groups.group_name

which match up to predefined values stored in YAML as cast_list.groups.value

and my Vue.js array is storing them as oven.groups.name like so:

new Vue({
  el: '#oven',

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

Am I even making sense? I'm comparing the arrays (multiple predefined vs. all available).

So if I have 4 ensemble_groups values like ["Ballroom dancers", "Tap dancers", "Farmers", "Cowboys"] and a cast_list entry is put into two groups ["Tap dancers", "Cowboys"], I want the checkboxes for those two groups to be checked when the page loads.

Help?

UPDATE:

I've used Roy's Answer to get the checkboxes working, but I've lost the index value to keep the data in the right place. Continued over at How to set incremental counter for nested arrays using Vue JS

score 1 · Accepted Answer · answered Sep 21 '16 at 18:06

1

Multiple checkboxes can be bound to an array to work the way you want. The snippet below lists the ensemble_groups with checkboxes beside them. Below that, the cast_groups array is listed. The cast_groups array starts out with one value, but a timer programmatically adds one, then removes the first one so you can see it responding to data changes. You can also click the checkboxes to toggle membership, and the cast_groups will be changed accordingly.

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>

answered Sep 21 '16 at 18:06

Roy J

42,522
10
78
102

Thanks for the reply. I edited my OP with my new code, because once I adapted your solution for my scenario (keeping my data structure intact), I've lost the ability to use `@{{ $index }}` because it's stuck in the `ensemble_groups` loop, cycling through `0,1,2,3` over and over. I need an incremental index that's attached to `v-for="member in cast"` and I tried `@{{ member.$index }}` and `@{{ $member.index }}` but neither works. – Daniel Fowler Sep 22 '16 at 12:43
@danfo If your only reason for the `id` is to tie the labels to the inputs, I'd just put the inputs inside the labels and forget the `id`s. – Roy J Sep 22 '16 at 12:54
It's to keep the data structure intact for my array upon save, which must follow the structure `array_name[0][field_name]`, `array_name[1][field_name]`, `array_name[2][field_name]`, etc. – Daniel Fowler Sep 22 '16 at 14:37
Post a new question with some information about your save process. It seems like the id should be part of the data item and not just a view issue. – Roy J Sep 22 '16 at 14:57
Done. Thanks for the attention. – Daniel Fowler Sep 22 '16 at 16:33

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

1 Answers1