Element Ui: Karussell - So stellen Sie die aktuelle Folie ein

Question

Es fällt mir schwer, herauszufinden, wie man das Karussell verwendet und wie man die aktuelle Folie einstellt. Hier

ist das doc of the component

Hier ist die 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> 

Ich denke, es sollte auf die Tatsache, kann das Verfahren setActiveItem mit dem Bauteil verbunden ist, aber ich weiß nicht wissen, wie man es richtig nennt

Answer 1

Sie müssen die setActiveItem auch für die definieren vue Instanz Whcih this.$refs.carousel.setActiveItem zugreifen aktuelle Folie zu ändern, wie folgt vor:

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

siehe fiddle arbeiten.