[Vue.js]selectにv-modelを使った際selectedで初期値を設定する方法

例えば以下のような場面だとします。

・PHPでCRUDアプリを作っている
・セレクトボックスの選択肢によってフォームに変化を加えたい（例えば「その他」を選択したら入力欄が出てくるような）
・選択肢はPHP側で管理している

そんなアプリの編集画面では、セレクトボックスの選択は以下のような状態になると思います。

<select name="example" id="example" v-model="selected">
   <option value="item 1">item 1</option>
   <option value="item 2" selected>item 2</option>
   <option value="item 3">item 3</option>
</select>

ここでVue.jsのv-modelを指定している場合、HTML中のselectedやcheckedは無視されるため、実際の編集画面ではセレクトボックスが選択されていない状態になります。Vue.jsにおいて選択肢の初期値はVueクラスを初期化する際に指定しなければいけないので、そちらへこのselectedされている値を渡さなければいけません。

このとき画面上では選択されていないように見えますが、HTMLコード上はちゃんとselectedされている状態となっていますので、document.getElementByID等で値を取ってきて初期値に設定させます。

const app = new Vue({
   el: '#app',
   data: {
       selected: document.getElementById('example')? document.getElementById('example').value : ''
   }
});

これで無事selectedされているoptionがv-modelでも選択された状態になります。

分かってしまえば単純なことですが、Vue初心者だった私はハマってしまったので記録として残しておきます。