carousel - 元素UI : Carousel - How to set current slide

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 .