this.$refs.countdown.start is not a function about vue-countdown

[fengyuanchen]

Please check your code carefully.

[Altoar]

It seems to be that this problem is occuring when I load the countdown component dynamically inside a for loop.

example:

<div  v-for="index in [1,2,3]" v-bind:key="index"> 
<countdown v-bind:auto-start="false"  :ref="'countdown'+index" :time="7000"><template slot-scope="props">{{ props.totalSeconds }}</template></countdown>
 </div>

and the start method doesn't work. e.g. this.$refs.countdown1.start()
But outside of the loop it works fine.

[fengyuanchen]

When ref is used together with v-for, the ref you get will be an array containing the child components mirroring the data source. see more.

Demo:

<template>
  <div>
    <div v-for="index in [1, 2, 3]" :key="index"> 
      <countdown :auto-start="false" ref="countdown" :time="7000">
        <template slot-scope="props">{{ props.totalSeconds }}</template>
      </countdown>
    </div>
  </div>
</template>

<script>
  export default {
    mounted() {
      console.log(this.$refs.countdown[1])
    },
  }
</script>