Vuetify v-select 属性タイプのチェックが失敗する
P粉988025835
P粉988025835 2023-09-04 15:59:13
0
1
538
<p>Vuetify 3 で v-select を使用すると、よく次のエラーが発生します。</p> <ブロック引用> <p>[Vue 警告]: 無効なプロップ: プロップ 'title' の型チェックに失敗しました。文字列 | 数値 | ブール値が必要ですが、オブジェクトが返されました</p><p> <VListItem key=0 title=`</p> で </blockquote> <p>何が問題なのかわかりません。バックエンド API から JSON 応答としてオブジェクトの配列を取得しています。私の目標は、ドロップダウンにすべてのユーザー名を表示することですが、ドロップダウンで項目を選択するときに、オブジェクト全体を変数に保存したいと考えています。たとえば、ドロップダウン メニューで「Desmond」ユーザー名を選択した場合、Desmond に関連するオブジェクト、つまり <code>{"username": "Desmond"、"email": " を保存したいとします。 desmond@test.com"}</code></p> <pre class="lang-js prettyprint-override"><code><v-select v-model="selectedItem" :items="アイテム" 名前= "ユーザー名" item-text="ユーザー名" label="アイテムを選択" リターンオブジェクト > </code></pre> <pre class="brush:php;toolbar:false;"><script> "axios" から axios をインポートします。 デフォルトのエクスポート { 名前: 「Testing123」、 データ() { 戻る { アイテム: []、 selectedItem: null、 }; }、 作成した() { this.fetchItems(); }、 メソッド: { fetchItems() { アクシオス .get("http://localhost:5000/items", config) .then((応答) => { this.items = 応答.データ }) .catch((エラー) => { コンソール.エラー(エラー); }); },</pre> <p>これは私の<code>response.data</code></p>です。 <pre class="brush:php;toolbar:false;">[ { 「ユーザー名」: 「エリック」、 「電子メール」: 「eric@test.com」、 }、 { 「ユーザー名」: 「デズモンド」、 「電子メール」: 「desmond@test.com」、 }、 ]</pre></p>
P粉988025835
P粉988025835

全員に返信(1)
P粉707235568

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

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

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

リーリー

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

いいねを押す +0
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート