Chartjs-How can I display desired/particular chart in App.vue from Charts.vue which contains different charts in Vuejs

by

4👍

✅

You could probably use a prop and interpolate the id on the component.

Charts.vue (should be renamed to Chart.vue in this way I guess)

<template>
  <div class="chart-containr">
    <canvas :ref="`chart${chartId}`"></canvas>
  </div>
</template>

<script>
export default {
  props: {
    chartId: {
      type: String,
      default: '',
    },
  },
}
</script>

App.vue

<template>
  <div class="content-1">
    <charts chart-id="1"></charts>
  </div>

  <div class="content-8">
    <charts chart-id="2"></charts>
  </div>
</template>

There is maybe also a way with slots but props will be enough here.
Btw, you could even v-for and display the <charts> component programmaticaly.

Leave a comment