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="tag"
:items="tags"
variant="solo"
label="Tags" >
<template #item="{ item }" >
<v-list >
<v-list-item :title="item.title" />
</v-list>
</template>
</v-select></pre>
<p>数据中的标签和标签：</p>
<pre class="brush:php;toolbar:false;">tag: null,
tags: [
{ title: 'example1', value: 0 },
{ title: 'example2', value: 1 },
],</pre>
<p>在输出中，我选择了带有选项的选项，但选项不可选取：</p>
<p>那么如何使用可选选项为 Vuetify 3 中的 VSelect 组件设置插槽“item”？</p>
传递给槽的
props对象包含一个onClick回调，您需要绑定它才能使选择工作：<template #item="{ item, props: { onClick } }" > <v-list-item :title="item.title" @click="onClick"/> </template>文档目前有点稀疏，给出的类型为
Record。在 Vuetify 3.4 中，其他值是key、title、value和ref（来自底层的模板引用） VVritualScroll 用于更新滚动条的高度。使用带有
title属性的组件时（例如 VListItem），您可以绑定整个props对象：<template #item="{ props }" > <v-list-item v-bind="props"/> </template>（顺便说一句，
#item插槽已将其内容渲染到v-list中，无需再次包装）这是一个片段：
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>