VSelect - Vuetify 3 のカスタム「プロジェクト」スロットでは選択が機能しません

Question

Vue 3 アプリケーションで Vuetify 3 の VSelect を使用しており、アイテム スロットを使用しようとしています。しかし、VSelect オプションが選択できなくなりました

次の VSelect 要素があります:

<v-select
    v-model=「タグ」
    :items="タグ"
    バリアント=「ソロ」
    ラベル="タグ">
    <template #item="{ item }" >
      <v-list>
        <v-list-item :title="item.title" />
      </v-list>
    </テンプレート>
  </v-select>

タグとデータ内のタグ:

タグ: null,
  タグ: [
    { タイトル: '例 1'、値: 0 },
    { タイトル: '例 2'、値: 1 },
  ]、

出力では、オプションを使用してオプションを選択しましたが、オプションは選択できません:

それでは、Vuetify 3 の VSelect コンポーネントの選択可能なオプションを使用してスロット「アイテム」を設定するにはどうすればよいでしょうか?

Answer 1

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

リーリー

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

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

(ところで、

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

これはスニペットです:

リーリー リーリー