Rendering Dynamic Select Options

Question

I have a form that is currently using jQuery to do a series of ajax requests and then dynamically change select options based on the data. I thought this would be something nice to reimplement in vue.js as a learning experience. But seem to be running into a snag with what is the best way to add dynamic options to a <select>. This link in the docs (http://012.vuejs.org/guide/forms.html#Dynamic_Select_Options) looks like exactly what I need but am having issues replicating in my code below. Any ideas what I could be doing wrong? Any tips are appreciated!

<script src="https://unpkg.com/vue"></script>

<script type="text/x-template" id="add-match-template">
    <select v-model="selected_game" options="games"></select>
</script>

<div id="add_match_form">
    <add-match-form></add-match-form>
</div>

<script type="text/javascript">
    Vue.component('add-match-form', {
        template: '#add-match-template',
        data: function() {
            return {
                games: [
                    {'value': 1, 'text': 'Game 1'},
                    {'value': 4, 'text': 'Game 4'}
                ],
                selected_game: null
            }
        }
    })

    new Vue({
        el: "#add_match_form"
    })
</script>

Answer 1

In Vue 2, you no longer bind options that way. Here is the current documentation.

Vue.component('add-match-form', {
  template: '#add-match-template',
  data: function() {
    return {
      games: [
        {'value': 1, 'text': 'Game 1'},
        {'value': 4, 'text': 'Game 4'}
      ],
      selected_game: null
    }
  }
})

new Vue({
  el: "#add_match_form"
})

Template:

<div id="add_match_form">
    <add-match-form></add-match-form>
</div>

<template id="add-match-template">
  <select v-model="selected_game">
    <option v-for="game in games" :value="game.value">{{game.text}}</option>
  </select>
</template>

Working Example

console.clear()


Vue.component('add-match-form', {
  template: '#add-match-template',
  data: function() {
    return {
      games: [
        {'value': 1, 'text': 'Game 1'},
        {'value': 4, 'text': 'Game 4'}
      ],
      selected_game: null
    }
  }
})

new Vue({
  el: "#add_match_form"
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.10/vue.js"></script>
<div id="add_match_form">
    <add-match-form></add-match-form>
</div>

<template id="add-match-template">
  <select v-model="selected_game">
    <option v-for="game in games" :value="game.value">{{game.text}}</option>
  </select>
</template>

Answer 2

  <select v-on:change="setCenter" v-model="market">
                        <option v-for="(item,index) in markets"
                                v-bind:key="index" :value="index">{{item.name}} 
                        </option>
  </select>

Dont forget about v-bind:key, also map value using :value otherwise default value would not be selected. I use index here as value but you can use item property. Index is better as it is easy to find object in array when index changes.