Calling function from outside of component but rendered in v-for loop-CodePudding

I have some component which is rendered 6 times in v-for loop. I'm trying to do onclick function which will call method inside of specified chart component. But now i'm getting errors like this.$refs.chart1.pauseChart() is not an function. This is how i'm trying to achieve it:

<BaseChart ref="`chart$[index]`" @click="pauseChart(index)"/>

pauseChart(index) {
  this.$refs.[`chart${index}`].pauseChart()
}

CodePudding user response：

refs inside v-for are arrays rather than singulars. Therefore, if you have

<template v-for="(something, index) in list">
  <BaseChart ref="chart" :key="index" @click="pauseChart(index)" />
</template>

you should use

methods:
{
  pauseChart(idx)
  {
    this.$refs.chart[idx].pauseChart();
  }
}

For more information - refer to Vue documentation

CodePudding user response：

ref will be having an array. hence, you have to access that with 0 index.

Live Demo :

Vue.component('child', {
  methods: {
    pauseChart() {
      console.log('child method call');
    }
  },
  props: ['childmsg'],
  template: '<p v-on="$listeners">{{ childmsg }}</p>',
});

var app = new Vue({
  el: '#app',
  methods: {
    pauseChart(chartIndex) {
      this.$refs[chartIndex][0].pauseChart();
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
<div id="app">
<div v-for="index in 6" :key="index">
  <child childmsg="Hello Vue!" :ref="`chart${index}`" @click="pauseChart(`chart${index}`)">
  </child>
</div>
</div>