図書館合金 Part 2

programming and books, music etc.

vue.js でselectの生成

検索するとバージョン0.11の頃の書き方がヒットして混乱するが、v2では

var app = new Vue({
    el: '#app',
    data: {
        selected: 'B',
        options: [
            { text: 'One', value: 'A' },
            { text: 'Two', value: 'B' },
            { text: 'Three', value: 'C' }
        ]
    }
}

と書く。HTML側は、

<div id="app-8">
    <select v-model="selected">
        <option v-for="option in options" v-bind:value="option.value">
        {{ option.text }}
      </option>
    </select>
    <span>Selected: {{ selected }}</span>
</div>