vuetify
vuetify copied to clipboard
fix: enforce the use of a function template ref in slots where the props have a template ref
Temporarily upgrade to "vue": "^3.4.25" in dev playground to replicate the issue
fixes #19713 fixes #19685
Description
Markup:
<template>
<h2>Virtual Scroll Item slot ref</h2>
<v-select
:items="items"
item-title="name"
label="User"
v-for="item in selectArr"
>
<template v-slot:item="{ props, item }">
<v-list-item v-bind="props" :subtitle="item.raw.department" />
</template>
</v-select>
<!-- <button @click="selectArr.push(1)">Add Select</button> -->
<h2>VMenu activator ref</h2>
<v-tooltip v-for="item in selectArr" text="Tooltip">
<template v-slot:activator="{ props }">
<v-btn v-bind="props">Tooltip</v-btn>
</template>
</v-tooltip>
<br>
<br>
<br>
<br>
<h2>VDatePickerYears year slot ref</h2>
<v-date-picker-years v-for="item in selectArr">
<template v-slot:year="{ props }">
<v-btn v-bind="props">year</v-btn>
</template>
</v-date-picker-years>
</template>
<script>
export default {
data: () => ({
selectArr: [1, 1],
items: [
{
name: 'John',
department: 'Marketing',
},
{
name: 'Jane',
department: 'Engineering',
},
{
name: 'Joe',
department: 'Sales',
},
{
name: 'Janet',
department: 'Engineering',
},
{
name: 'Jake',
department: 'Marketing',
},
{
name: 'Jack',
department: 'Sales',
},
],
}),
// mounted: function () {
// console.log('---refs--', this.$refs.test, this.$refs.tests)
// },
}
</script>
VOverlay does this too, maybe others.
Issue could happen to all slots whose props contain template ref, I found 3 places, they all have console errors when running in dev playground
- virtual-scroll-Item default slot itemRef
- overlay activator slot
- date-picker-years year slot
Not sure whether date-picker-year worth to fix or not, because it's unlikely two appear the same time in a loop