Vue3 プルダウンを作ってみる

Vue3をもちいて今日はプルダウンを作ってみる。
基本は、javascript側で定義した内容をプルダウンの結果として使う。

今回のオチ

（HTML側）
                <select id="categorys">
                  <option
                  v-for="category in categorys" 
                  v-bind:value="category.value">
                  {{ category.name }}
                </option>
                </select>

（javascript側）
const categorys = {
    data() {
        return {
            categorys: [
                { name: 'category1', value: 1},
                { name: 'category2', value: 2},
                { name: 'category3', value: 3}
            ]
        }
    }
}
Vue.createApp(categorys).mount('#categorys');

作成までの流れ

1. 成功したフォームをイメージする。

今回の成功系イメージ（超簡単なプルダウン）

<select>
    <option value="1">category1</option>
    <option value="2">category2</option>
    <option value="3">category3</option>
</select>

1. 必要な要素を確認
   ・ 繰り返しが必要な要素
   optionタグ。<option></option>
   ・ 動的な指定が必要な部分1
   optionのvalue。<option value="ココ"></option>
   ・ 動的な指定が必要な部分2
   optionの表示部分。<option>ココ</option>

2. 実際に書いてみる と、上記のオチと同じ状態になる。

うまくいかなかったこと

javascript側のマウントするときに、optionにつけちゃえばいいんじゃないか？と以下のように手を抜いた。

                <select>
                  <option
                  id="categorys"
                  v-for="category in categorys" 
                  v-bind:value="category.value">
                  {{ category.name }}
                </option>
                </select>

そうすうと、うまく動かない。
javascript側で指定する場合、一つ上の階層の要素（今回であればoptionに適用したいので、optionの上のselect）にあてないといけなかった。