Vue.js 0.12.10 options

Before (vue.js 0.12.9)

最初はoptionsは存在せず、Vueの初期化後にoptionsプロパティを初期化すると、 <select>のv-modelは反映されず、常に先頭の<option>が選択されてしまう。

そのため、selectedをoptionsより後に初期化する必要があった。

<select v-model="selected">
	<option v-repeat="options" value=""></option>
</select>

After (vue.js 0.12.10)

0.12.10で追加されたoptions属性を使うと、後からoptionsを初期化してもv-modelが反映される。

セレクトボックスに表示される要素へは、value, text, disabledが決めうちで反映される。

<select v-model="selected" options="options">
</select>

JavaScript code:

var vm = new Vue({
  el: "#app",
  data: {
    options: [],
    selected: "user" + Math.round(Math.random() * 2 + 1),
    status: "loading options",
  },
  ready: function() {
    setTimeout(function() {
      this.options = [
        {value: "user0", text: "ユーザ0"},
        {value: "user1", text: "ユーザ1"},
        {value: "user2", text: "ユーザ2"},
        {value: "user3", text: "ユーザ3"},
      ];
      this.status = "done";
    }.bind(this), 500);
  }
});

Example