Question

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

add_index :models, [:name, :year, :trim], unique: true

和作为图像来源的数组：

<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'
  }
],

我希望能够在医生，护士之间进行选择以更改我的旋转木马中可用的图像（<v-select :items="personItems" v-model="person"> <v-select> personItems: [ { text: 'Physician', value: 'physician'}, { text: 'Nurse', value: 'nurse', disabled: false }, ], - 表示可用于所有选择）。这工作正常，但我遇到了一个问题。当我选择轮播图像''（3）时，我将我的选择切换为nurse - ＆gt;我的旋转木马消失了。

我希望它切换到适用于所有人或医生的阵列上的第一张图像。如何修复我的代码才能使其正常工作？

Answer 1

您可以设置参考号，然后在选择的更改事件中，使用$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为false时，vuejs vuetify carousel消失

1 个答案: