VSelect - Vuetify 3 のカスタム「プロジェクト」スロットでは選択が機能しません
P粉166779363
2023-08-26 12:35:37
<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>
スロットに渡される
リーリーprops
オブジェクトにはonClick
コールバックが含まれており、選択を機能させるにはこれをバインドする必要があります:Documentation は現時点では少し希薄で、指定されたタイプは
Record
です。 Vuetify 3.4 では、他の値はkey
、title
、value
、ref
(基になる VVritualScroll からのテンプレート参照) スクロール バーの高さを更新するために使用されます。
(ところで、title
プロパティ (例: VListItem) を持つコンポーネントを使用する場合、props
オブジェクト全体をバインドできます。 リーリー#item
これはスニペットです:スロットのコンテンツは
v-listにレンダリングされているため、再度ラップする必要はありません)