当 v-if 为假时，vuejs vuetify 轮播消失

Question

我有一个非常基本的旋转木马，如下所示：

<v-carousel>
  <v-carousel-item
  v-for="(item,i) in carouselItems" 
  :key="i"
  v-if="item.person=='' || (item.person == person)"
  >
    <v-card-media  height="200px" :src="item.src">
    </v-card-media> 
  <v-carousel-item>
</v-carousel>

以及作为图像来源的数组：

carouselItems: [
  {
    src: require('@/assets/car1.jpeg'), person: '', value: '0'
  },
  {
    src: require('@/assets/car2.jpeg'), person: '', value: '1'
  },
  {
    src: require('@/assets/car3.jpeg'), person: 'physician', value: '2'
  },
  {
    src: require('@/assets/car4.jpeg'), person: 'nurse', value: '3'
  }
],

当然 select 我可以改变人：医生、护士等...

<v-select
:items="personItems"
v-model="person">
<v-select>

personItems: [
 { text: 'Physician', value: 'physician'},
 { text: 'Nurse', value: 'nurse', disabled: false },
],

我希望能够在医生和护士之间进行选择，以更改轮播中可用的图像（'' - 意味着所有 select 都可用）。这工作正常，但我遇到了一个问题。当我为考试 3 (nurse) 选择轮播图像时，我将 select 切换为 physician -> 我的轮播消失了。

我希望它切换到阵列上的第一张图像，该图像是针对所有人或医生的。如何修复我的代码以使其正常工作？

Answer 1

您可以在 select 的更改事件上设置引用，select 轮播中带有 $refs.carousel.select(0) 的第一个项目。

<v-carousel ref="carousel">
  <v-carousel-item
  v-for="(item,i) in carouselItems" 
  :key="i"
  v-if="item.person=='' || (item.person == person)"
  >
    <v-card-media  height="200px" :src="item.src">
    </v-card-media> 
  <v-carousel-item>
</v-carousel>


<v-select
:items="personItems"
v-model="person"
@change="$refs.carousel.select(0)">
<v-select>

当 v-if 为假时，vuejs vuetify 轮播消失

vuejs vuetify carousel disappear when v-if is false

vue.js

vuetify.js