传递给槽的props
对象包含一个onClick
回调,您需要绑定它才能使 Select 起作用:
<template #item="{ item, props: {onClick, title, value} }" >
<v-list-item :title="item.title" @click="onClick"/>
</template>
当使用v-list-item
时,简单地绑定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>