carousel - 元素用户界面 : 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

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

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

查看工作 fiddle .