vue.jsでv-selectで選択した内容をプレビューで表示したい

Question

前提・実現したいこと

vue.jsでv-selectで選択した内容をプレビュー表示したい
vue.jsは最新verです
下のソースコードでいうitem-valueではなくitem-textを表示させたいということです

発生している問題・エラーメッセージ

エラーはありません
プレビュー表示したい内容が表示できないのが問題です

該当のソースコード

入力側

                  <td width="30%" class="text-left">
                    選択
                  </td>
                  <td>
                    <v-select
                      v-model="data.selection"
                      outlined
                      :items="items.selections"
                      item-text="value"
                      item-value="key"
                    ></v-select>

プレビュー側

            <tr v-show="data.selection != ''">
              <th>
                選択
              </th>
              <td class="texts-linefeet isClose">
                {{ data.selection }}
              </td>

  props: {
    data: Object,
  },
  data: () => ({}),
  computed: {
    ...mapState(['items']),
  }

検証ツールで見たsessionstorageのなか

items:{}
  selections:[{key:"",},...]
    0:{key:"0", value:"A"}
    1:{key:"1", value:"B"}
    2:{key:"2", value:"C"}

入力後プレビュー表示の際はサーバーとのやり取りはありません

試したこと

item-value="key"

を

item-value="value"

にすれば、一応プレビューの問題はなくなるのですが、そうするとサーバー側に渡す値がkeyじゃなくなって他の場所で問題が起こるので、それ以外の解決策をお願いします
公式ドキュメント読んでみたのですが、解決策分かりませんでした

Answer 1

v-selectで選択したオブジェクトのvalueを表示したい場合、下記のような実装で対応できると思います。

v-modelにバインドしたselectionには、選択したオブジェクトのkey値が入っているので、そのkey値からselections配列を検索し、key値が一致するオブジェクトを返すという実装がcomputedのselectedItemです。

<v-select
  v-model="selection"
  outlined
  :items="items.selections"
  item-text="value"
  item-value="key"
></v-select>
<div v-if="selectedItem">selected: {{ selectedItem.value }}</div>

<script>
export default {
  data() {
    return {
      selection: '',
      items: {
        selections: [
          { key: '0', value: 'A' },
          { key: '1', value: 'B' },
          { key: '2', value: 'C' },
          { key: '3', value: 'D' },
          { key: '4', value: 'E' }
        ]
      }
    }
  },
  computed: {
    selectedItem: function() {
      return this.items.selections.find(i => i.key === this.selection)
    }
  }
}
</script>