element Ui：Carousel - 如何设置当前幻灯片

Question

我很难弄清楚如何使用旋转木马，更具体地说是如何设置当前幻灯片。

以下是文档of the component

以下是fiddle

<div id="app">

 <button v-on:click="setActiveItem('first')">Go First</button>
 <button v-on:click="setActiveItem('second')">Go Second</button>

 <template>
   <el-carousel indicator-position="none" autoplay='false'>
       <el-carousel-item name ='first'>
           <h3>First</h3>
       </el-carousel-item>
       <el-carousel-item name ='second'>
         <h3>Second</h3>
       </el-carousel-item>
  </el-carousel>
</template>

我认为它应该与方法setActiveItem链接到组件的事实有关，但我不知道如何正确调用它

Answer 1

您必须为vii实例定义setActiveItem，以便访问this.$refs.carousel.setActiveItem以更改当前幻灯片，如下所示：

var Main = {
    methods: {
      setActiveItem(index) {
        this.$refs.carousel.setActiveItem(index);
      }
    }
  }

见工作fiddle。