無法重復使用Vue.js中的模板

Question

嘗試重用我的Graph.vue文件中的自定義模板，但是此嘗試失敗（控制台中沒有任何錯誤）。 我只得到一張圖表（紅色的）。 任何想法如何解決此代碼？

我當前的代碼如下所示：

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>

預期的結果應該是兩個小節-紅色和藍色一個。

Answer 1

我認為您的掛載點是錯誤的。 el: 'graph'在這種情況下， el: 'graph'行為可能是不可預測的（它將針對第一個圖形元素嗎？）。

使用類似的東西：

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

我喜歡@Cobaltway回答得更好，但這也解決了問題。
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 }
    });
}