Элемент Ui: Карусель - Как установить текущий слайд

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

Вы должны определить setActiveItem, а также для вю экземпляр whcih будет иметь доступ this.$refs.carousel.setActiveItem изменить текущий слайд, как следующее:

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

см работает fiddle.