Vue Select(v-select) 初期表示でtextが空になる

VueJS

Vuetifyv-selectだし、Vue Selectv-selectでインポートするから、ややこしい。
(Vuetify使っていて、Vue Selectを使っている場合もあるし)

見分け方

Vuetifyもv-selectは、:itemsで選択肢を渡すのに対して、Vue Selectは、:optionsで渡すのでみたい。

意図

localStorageに保存した値を読み取り、初期表示でv-selectに表示させたかったが、空になっていたのでうまく表示させるようにしたい。

Vue Select コード

このような形でvalueを選択したidのtext(この場合name)に揃えることができる。

<v-select
  :value="valueOptions.find(option => option.id === targetId) || ''"
  :options="valueOptions"
  label="name"
  id="target-id"
  @input="changeValue">
</v-select>

data () {
  return {
    targetId: 0,
    valueOptions: [
      { id: 1, name: 'A' },
      { id: 2, name: 'B' },
    ]
  }
},

methods {
  changeValue (event) {
    if (!event) {
      this.targetId = 0
      return
    }
    this.targetId = event.id
  }
}

Vuetifyの場合

多分このような形になると思う。
(試していないが。。。)

<v-select
  v-model="targetId"
  :items="valueOptions"
  item-text="name"
  item-value="id">
</v-select>

資料