Vuetify v-select 属性タイプのチェックが失敗する

Question

Vuetify 3 で v-select を使用すると、よく次のエラーが発生します。

<ブロック引用>

[Vue 警告]: 無効なプロップ: プロップ 'title' の型チェックに失敗しました。文字列 | 数値 | ブール値が必要ですが、オブジェクトが返されました

で

何が問題なのかわかりません。バックエンド API から JSON 応答としてオブジェクトの配列を取得しています。私の目標は、ドロップダウンにすべてのユーザー名を表示することですが、ドロップダウンで項目を選択するときに、オブジェクト全体を変数に保存したいと考えています。たとえば、ドロップダウン メニューで「Desmond」ユーザー名を選択した場合、Desmond に関連するオブジェクト、つまり {"username": "Desmond"、"email": " を保存したいとします。 desmond@test.com"}

<code><v-select
  v-model="selectedItem"
  :items="アイテム"
  名前= "ユーザー名"
  item-text="ユーザー名"
  label="アイテムを選択"
  リターンオブジェクト
>
</code>

<script>
"axios" から axios をインポートします。

デフォルトのエクスポート {
  名前: 「Testing123」、
  データ（） {
    戻る {
      アイテム: []、
      selectedItem: null、
    };
  }、
  作成した（） {
    this.fetchItems();
  }、
  メソッド: {
    fetchItems() {

      アクシオス
        .get("http://localhost:5000/items", config)
        .then((応答) => {
          this.items = 応答.データ
        })
        .catch((エラー) => {
          コンソール.エラー(エラー);
        });
    },

これは私のresponse.data

です。

[
    {
        「ユーザー名」: 「エリック」、
        「電子メール」: 「eric@test.com」、
    }、
    {
        「ユーザー名」: 「デズモンド」、
        「電子メール」: 「desmond@test.com」、
    }、
]

Answer 1

Vuetify v2 のプロパティ名である :item-text を使用しています。詳細については、ここ を参照してください。

v3 では、このプロパティの名前は :item-title に変更されました。

名前を変更すると機能します:

リーリー

例は playground でご覧いただけます。