VSelect - Vuetify 3 のカスタム「プロジェクト」スロットでは選択が機能しません
P粉166779363
P粉166779363 2023-08-26 12:35:37
0
1
563
<p>Vue 3 アプリケーションで Vuetify 3 の VSelect を使用しており、アイテム スロットを使用しようとしています。しかし、VSelect オプションが選択できなくなりました</p> <p>次の VSelect 要素があります: </p> <pre class="brush:php;toolbar:false;"><v-select v-model=「タグ」 :items="タグ" バリアント=「ソロ」 ラベル="タグ"> <template #item="{ item }" > <v-list> <v-list-item :title="item.title" /> </v-list> </テンプレート> </v-select></pre> <p>タグとデータ内のタグ:</p> <pre class="brush:php;toolbar:false;">タグ: null, タグ: [ { タイトル: '例 1'、値: 0 }, { タイトル: '例 2'、値: 1 }, ]、</pre> <p>出力では、オプションを使用してオプションを選択しましたが、オプションは選択できません: </p> <p>それでは、Vuetify 3 の VSelect コンポーネントの選択可能なオプションを使用してスロット「アイテム」を設定するにはどうすればよいでしょうか? </p>
P粉166779363
P粉166779363

全員に返信(1)
P粉786800174

スロットに渡される props オブジェクトには onClick コールバックが含まれており、選択を機能させるにはこれをバインドする必要があります:

リーリー

Documentation は現時点では少し希薄で、指定されたタイプは Record です。 Vuetify 3.4 では、他の値は keytitlevalueref (基になる VVritualScroll からのテンプレート参照) スクロール バーの高さを更新するために使用されます。

title プロパティ (例: VListItem) を持つコンポーネントを使用する場合、props オブジェクト全体をバインドできます。 リーリー

(ところで、

#item スロットのコンテンツは v-list にレンダリングされているため、再度ラップする必要はありません)

これはスニペットです:

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