VSelect - La sélection ne fonctionne pas pour l'emplacement « élément » personnalisé dans Vuetify 3

Question

J'utilise VSelect de Vuetify 3 dans mon application Vue 3 et j'essaie d'utiliser les emplacements d'éléments. Mais mes options VSelect deviennent non sélectionnables

J'ai cet élément VSelect :

<v-select
    v-model = "balise"
    :items="balises"
    variante = "solo"
    label="Balises" >
    <template #item="{élément }"
      <liste-v>
        <v-list-item :title="item.title"
      </v-list>
    </modèle>
  </v-select>

Balises et balises dans les données :

balise : null,
  Mots clés: [
    { titre : 'exemple1', valeur : 0 },
    { titre : 'exemple2', valeur : 1 },
  ],≪/pré>
Dans la sortie, j'ai sélectionné l'option avec l'option, mais l'option n'est pas sélectionnable : 

Alors, comment définir "l'élément" de l'emplacement à l'aide des options sélectionnables pour le composant VSelect dans Vuetify 3 ? 

Answer 1

Le rappel props 对象包含一个 onClick est passé au slot, vous devez le lier pour que la sélection fonctionne :

<template #item="{ item, props: { onClick } }" >
  <v-list-item :title="item.title" @click="onClick"/>
</template>

Documentation est un peu clairsemée pour le moment, le type donné est Record。在 Vuetify 3.4 中，其他值是 key、title、value 和 ref (référence du modèle sous-jacent) VVritualScroll est utilisé pour mettre à jour la hauteur de la barre de défilement.

Lors de l'utilisation d'un composant avec l'attribut title (tel que VListItemtitle 属性的组件时（例如 VListItem），您可以绑定整个 props), vous pouvez lier l'intégralité de l'objet props :

<template #item="{ props }" >
  <v-list-item v-bind="props"/>
</template>

(D'ailleurs, #item 插槽已将其内容渲染到 v-list moyen, pas besoin de reconditionner)

Voici un extrait :

const { createApp, ref } = Vue;
const { createVuetify } = Vuetify
const vuetify = createVuetify()
createApp({
  setup(){
    
    return {
       tag: ref(null),
        tags: [
          { title: 'example1', value: 0 },
          { title: 'example2', value: 1 },
        ],
    }
  }
}).use(vuetify).mount('#app')

<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/vuetify@3.1.6/dist/vuetify.min.css" />
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@5.x/css/materialdesignicons.min.css" rel="stylesheet">
<div id="app" class="d-flex justify-center">
  <v-app>
    <div>
    <v-select
      style="width: 300px;"
      v-model="tag"
      :items="tags"
      variant="solo"
      label="Tags"
    >
      <template #item="{ item, props: {onClick, title, value} }" >
        <v-list-item :title="item.title"  @click="onClick"/>
      </template>
    </v-select>
      
      Selected: {{tag}}
    </div>
  </v-app>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@3.1.6/dist/vuetify.min.js"></script>