element Ui：旋轉木馬 - 如何設置當前幻燈片

Question

我很難弄清楚如何使用旋轉木馬，更具體地說如何設置當前幻燈片。

這裏是DOC 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

您必須定義setActiveItem以及VUE例如whcih將訪問this.$refs.carousel.setActiveItem改變當前幻燈片，就像下面：

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

看到工作fiddle。