无法在 Vue.js 中重用模板

Question

尝试重用 Graph.vue 文件中的自定义模板，但此尝试失败（控制台中没有任何错误）。我只渲染了一张图表（红色的）。有什么想法如何修复此代码吗？

我当前的代码如下所示：

main.js

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

new Vue({
    el: 'graph',
    components: { 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>

示例.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'在这种情况下，行为可能是不可预测的（它会针对第一个图形元素吗？）。

使用类似的东西来代替：

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>