34
33

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

Vue.jsのselectでinitial valueをセットする

Last updated at Posted at 2015-05-07

通常のselected

<select>
   <option value="item1">item1</option>
   <option value="item2" selected>item2</option>
   <option value="item3">item3</option>
</select>

vue.jsのoptionsを使う場合

<select v-model="selected_item" options="items">
items = [
   {text: 'item1', value: 'item1'}
   {text: 'item2', value: 'item2'}
   {text: 'item3', value: 'item3'}
]

と指定されていた場合、

 @vue = new Vue
      el: 'body'
      data:
        selected_item: 'item2'

と初期値を設定すると、selectedで指定したときと同じように初期値が選択される。
items objectにselectedオプションを直接書き込んで渡すことはできなそう。

参考

When there are inline values on input elements bound with v-model, e.g. <input value="hi" v-model="msg">, the inline value will be used as the inital value. If the vm comes with default data, it will be overwritten by the inline value. Same for selected attribute on elements.

34
33
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
34
33

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?