[Vuejs]-VUEjs templates multiple selectboxes

There are a couple of mistakes you are (or might be) making.

1. First of all, the value prop you pass down has to be an array (seems
   like it’s a string from your example)
2. value is not correctly set, you need to set it by doing :value="someValue"; you can’t have curlies in an attribute.

3. Lastly, value should probably be the id of the item and not the name. You have a chance of a collision if you use the name.

   • Bonus: you don’t need to use :name at all (unless you are submitting the form server side…? But I can’t see why you would do that.)

Here’s a simple working example to sum this up:

HTML

<label v-for="list_item in list">
    <input type="checkbox" v-model="value" :required="required" :readonly="readonly" :value="list_item.id"> {{ list_item.name }}
</label>

JS

var app = new Vue({ 
  el: 'main', 
  data: function () { 
    return { 
      value: [],
      label: 'Label name',
      readonly: false,
      required: true,
      list: [
        {
          name: 'Item 1',
          id: 'item1'
        },
        {
          name: 'Item 2',
          id: 'item2'
        }
      ]
    }
  } 
})

I’ve also made a bin for you to try it out.