vuetify icon indicating copy to clipboard operation
vuetify copied to clipboard

fix: enforce the use of a function template ref in slots where the props have a template ref

Open yuwu9145 opened this issue 1 year ago • 2 comments

Temporarily upgrade to "vue": "^3.4.25" in dev playground to replicate the issue

Vue reproduction link

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>




yuwu9145 avatar May 01 '24 14:05 yuwu9145

VOverlay does this too, maybe others.

KaelWD avatar May 02 '24 04:05 KaelWD

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

yuwu9145 avatar May 04 '24 10:05 yuwu9145