VSelect - La sélection ne fonctionne pas pour l'emplacement « élément » personnalisé dans Vuetify 3
P粉166779363
2023-08-26 12:35:37
<p>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</p>
<p>J'ai cet élément VSelect : </p>
<pre class="brush:php;toolbar:false;"><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></pre>
<p>Balises et balises dans les données :</p>
<pre class="brush:php;toolbar:false;">balise : null,
Mots clés: [
{ titre : 'exemple1', valeur : 0 },
{ titre : 'exemple2', valeur : 1 },
],≪/pré>
<p>Dans la sortie, j'ai sélectionné l'option avec l'option, mais l'option n'est pas sélectionnable : </p>
<p>Alors, comment définir "l'élément" de l'emplacement à l'aide des options sélectionnables pour le composant VSelect dans Vuetify 3 ? </p>
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Le rappel
props对象包含一个onClickest 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'objetprops:<template #item="{ props }" > <v-list-item v-bind="props"/> </template>(D'ailleurs,
#item插槽已将其内容渲染到v-listmoyen, 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>