TypeError: this.$refs.XXX.next is not a function

el-carousel自定义切换按钮：

<div class="photo_group" v-for="(item, index) in tableData" :key="index">
	<el-carousel :interval="4000" type="card" height="200px" ref="mycarousel">
	  <el-carousel-item v-for="item in 6" :key="item">
	    <h3 class="medium">{{ item }}</h3>
	  </el-carousel-item>
	</el-carousel>
</div>
<!-- 切换按钮 -->
 <div class="swiper_btn">
   <div class="btn" @click="handlePrev"></div>
   <div class="btn" @click="handleNext"></div>
 </div>

handlePrev(){
  this.$refs.mycarousel && this.$refs.mycarousel.prev()
},
handleNext(){
  this.$refs.mycarousel && this.$refs.mycarousel.next()
},

在使用ref获取实例自定义点击事件的时候，一直报错：

[Vue warn]: Error in v-on handler: "TypeError: this.$refs.mycarousel.next is not a function"

解决办法：

经常使用$refs去获取组件实例，一般都是拿到实例对象，这次去取值的时候发现，拿到的竟然是个数组。
原来vue把v-for里面的ref展开成数组的形式，哪怕你的ref名字是唯一的，因此：获取数组第一项即可

handlePrev(){
  this.$refs.mycarousel[0] && this.$refs.mycarousel[0].prev()
 },
 handleNext(){
   this.$refs.mycarousel[0] && this.$refs.mycarousel[0].next()
 },