I have a select which I want to populate from the array of objects like

[{"id": 1, "name": "Some name"},
 ... 
{"id": 5, "name": "Another name"}]

which is stored in items in data property of the Vue

var app = new Vue({
el: "#app",
data: {
    items: [],
....

    }
})

I'm trying to do it like with the v-for and v-model like that:

  <select id="categories" v-model="items">
      <option v-for="item in items" :value="item.id">{{ item.name }}</option>
  </select>

and it doesn't work, however if I tried the same code with the int Array everything is fine. Can't wrap my head around it.

I have a select which I want to populate from the array of objects like

[{"id": 1, "name": "Some name"},
 ... 
{"id": 5, "name": "Another name"}]

which is stored in items in data property of the Vue

var app = new Vue({
el: "#app",
data: {
    items: [],
....

    }
})

I'm trying to do it like with the v-for and v-model like that:

  <select id="categories" v-model="items">
      <option v-for="item in items" :value="item.id">{{ item.name }}</option>
  </select>

and it doesn't work, however if I tried the same code with the int Array everything is fine. Can't wrap my head around it.

• javascript
• select
• vue.js
• vuejs2

1 Answer 1

Use v-model for the selected value

<select id="categories" v-model="selectedValue">
  <option v-for="item in items" :value="item.id">{{ item.name }}</option>
</select>

Add selectedValue to your data.

var app = new Vue({
  el: "#app",
  data: {
    items: [],
    selectedValue: null

  }
})

const items = [{"id": 1, "name": "Some name"},
{"id": 5, "name": "Another name"}]

var app = new Vue({
el: "#app",
data: {
    items,
    selectedValue: null
    }
})

<script src="https://unpkg./[email protected]/dist/vue.js"></script>
<div id="app">
  <select id="categories" v-model="selectedValue">
      <option v-for="item in items" :value="item.id">{{ item.name }}</option>
  </select>
  
  Selected Value: {{selectedValue}}
</div>