Eine Vorlage kann nicht in Vue.js verwendet werden

Question

Der Versuch, eine benutzerdefinierte Vorlage aus meiner Graph.vue-Datei wiederzuverwenden, aber dieser Versuch schlägt fehl (ohne Fehler in der Konsole). Ich bekomme nur ein Diagramm gerendert (das rote). Irgendwelche Ideen, wie man diesen Code repariert?

Meine aktuellen Code sieht wie folgt aus:

main.js

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

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

Graph.vue

<template> 
    <canvas height="400" width="600"></canvas> 
</template> 

<script> 
    import Chart from 'chart.js'; 

    export default { 
     props: ['labels', 'values', 'color'], 
     props: { 
      labels: {}, 
      values: {}, 
      color: { 
       default: 'rgba(220,220,220,0.2)' 
      } 
     }, 
     mounted(){ 
      var data = { 
       labels: this.labels, 
       datasets: [ 
        { 
         label: "My First dataset", 
         fill: true, 
         lineTension: 0.1, 
         backgroundColor: this.color, 
         borderColor: "rgba(75,192,192,1)", 
         borderCapStyle: 'butt', 
         borderDash: [], 
         borderDashOffset: 0.0, 
         borderJoinStyle: 'miter', 
         pointBorderColor: "rgba(75,192,192,1)", 
         pointBackgroundColor: "#fff", 
         pointBorderWidth: 1, 
         pointHoverRadius: 5, 
         pointHoverBackgroundColor: "rgba(75,192,192,1)", 
         pointHoverBorderColor: "rgba(220,220,220,1)", 
         pointHoverBorderWidth: 2, 
         pointRadius: 1, 
         pointHitRadius: 10, 
         data: this.values, 
         spanGaps: false 
        }, 
       ] 
      }; 

      new Chart(this.$el, {type: 'line', data: data}); 
     } 
    } 
</script> 

example.html

<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> 
<script src="{{asset('/js/main.js')}}"></script> 

Das beabsichtigte Ergebnis sollte sein, zwei Balken - rot und b lue eins.

Answer 1

Ich denke, Ihr Mountpoint ist falsch. el: 'graph' Verhalten ist in diesem Kontext wahrscheinlich nicht vorhersagbar (wird es das erste Diagrammelement anvisieren?).

Verwenden etwas wie das statt:

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> 

Answer 2

Ich mag besser @Cobaltway beantworten, aber dies löst auch das 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 } 
    }); 
}