[Chartjs]-Can't reuse a template in Vue.js

by

5👍

✅

I think your mountpoint is wrong. el: 'graph' behavior is probably not predictable in this context (will it target the first graph element?).

Use something like that instead:

JS:

new Vue({
    el: '#graphContainer',
    components: { Graph }
});

HTML:

<div id="graphContainer">
  <div style="width:600px" class="container>
    <graph :labels="['January', 'February', 'March']"
    :values="[10, 42, 4]"
    color="red"></graph>
  </div>
  <div style="width:600px" class="container">
    <graph :labels="['May', 'June', 'July']"
    :values="[100, 420, 99]"
    color="blue"></graph>
  </div>
</div>

1👍

I like @Cobaltway answer better, but this also solves the problem.
JS:

import Vue from 'vue';
import Graph from './components/Graph.vue';

const graphs = document.querySelectorAll('graph');

for (let i = 0; i < graphs.length; ++i) {
    new Vue({
        el: graphs[i],
        components: { Graph }
    });
}

Leave a comment