web-dev-qa-db-ja.com

オプション選択メニューにデフォルト値を設定

カスタム属性をオプション選択メニューにバインドしたい。 <option>タグは、単にselected="selected"の属性を持ちます。

<template>
  <div>
    <select>
      <option v-for="" v-bind:selected="[condition ? selected : notSelected]" value="">{{ resource.xprm_name }}</option>
    </select>
  </div>
</template>

data: {
  selected: "selected",
  notSelected: ""
}

これは機能しませんが、v-bind:selectedをv-bind:classに変更すると、適切なクラスを受け取るため、ロジックは機能しますが、selected属性は機能しません。

そのようなカスタム属性で動作させる方法はありますか？

vue-componentvue.jsvuejs2
29
marchello

v-modelを使用して、選択ボックスのデフォルト値を選択できます。

マークアップ：

<div id="app">
  <select v-model="selected">
     <option value="foo">foo</option>
     <option value="bar">Bar</option>
     <option value="baz">Baz</option>
  </select>
</div>

モデルを表示：

new Vue({
  el: "#app",
  data: {
    selected: 'bar'
  }
});

JSFiddleは次のとおりです。 https://jsfiddle.net/Lxfxyqmf/

52
craig_h