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

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

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

见工作fiddle。