Vuetify v-select の items と v-model の違いを比較する

qiita.com

Vue では data に書いた変数をを v-model で双方向 binding といって、input の側からも変数を変更できるようにできる。

これを v-select でだめす　

試す

普通に vuetify の v-select を使ってみる

サンプルは公式の

vuetifyjs.com

この見た目を実現するために

https://codepen.io/pen/?&editors=101

こういったコードを書く

    data: () => ({
      jobItems: ['never change', 'changing', 'changed recently'],
    }),

data でjobItems の配列を置いて

v-select の :items に jobItems の配列をセット

<v-select
  :items="jobItems"
  label="job status"
></v-select>

v-selct の v-bind:items その配列をセットする

すると選択肢が出る。

v-select に今度は v-model に jobStatus の配列をセット

data: () => ({
  jobStatus: ['never change', 'changing', 'changed recently'],
  jobItems: ['never change', 'changing', 'changed recently'],
}),

data に

jobItems はそのままで jobStatus を追加する

<v-row justify="center">
  <v-select
    v-model="jobStatus"
    :items="jobItems"
    label="job status"
  ></v-select>
</v-row>
<v-row justify="center">
  {{jobStatus}}
</v-row>

その jobStatus の配列を v-model にセットする

そうすると v-model によって html に書き出される

job status を never change にしている場合だと html に吐き出せれて表示される

changed recently にするとそれが反映される

結論

items が v-model に同期されることになる。