[Chartjs]-Is it possible to get the assigned ref name in a component? Vue.js

by

4👍

✅

The best way would be to add a that name as a prop (as ref is not passed as a prop):

<my-component ref="something" name="something" />

If you don’t want this, you can loop through the parent’s $refs and check which one refers to this. But… this is only available when the component is already mounted, so it cannot be a computed.

Demo:

Vue.component('kpis-linechart', {
  template: '#kpis-linechart-template',
  data() {
    return {
      id_chart: 'default-id'
    };
  },
  mounted() {
    const entry = Object.entries(this.$parent.$refs)
                        .find(([key, value]) => value === this);
    if (entry) {
      this.id_chart = entry[0];
    }
  }
});

var vm = new Vue({
  el: '#app'
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.21/vue.min.js"></script>

<div id="app">
  <kpis-linechart ref="something"></kpis-linechart>
</div>

<template id="kpis-linechart-template">
  <p :id="id_chart">I'm a chart, and my id is "<b>{{id_chart}}</b>"</p>
</template>

Leave a comment