这是我的chartjs组件，我试图从后端传递两个数组。不知何故，Vue.js在Vue中获得了数组，但它没有显示任何内容。我对Vue非常陌生，请耐心等待。
Chartjs.vue

<template>
  <div class="main-content">
    <div class="page-header">
      <h3 class="page-title">Chart JS</h3>
      <ol class="breadcrumb">
        <li class="breadcrumb-item"><a href="#">Home</a></li>
        <li class="breadcrumb-item"><a href="#">Charts</a></li>
        <li class="breadcrumb-item active">Chart JS</li>
      </ol>
    </div>
    <div class="row">
      <div class="col-sm-12">
        <div class="card">
          <div class="card-header">
            <h6>Chartjs</h6>
          </div>
          <div class="card-body">
            <div class="mb-4">
              <h5 class="section-semi-title">
                Line Chart
              </h5>
              <line-chart
                :labels='["Enero", "Febrero", "Marzo", "Abril", "Mayo", "Junio", "Julio", "Agosto", "Septiembre", "Octubre", "Noviembre", "Diciembre"]'
                :values='values'
              />
            </div>
            <div class="mb-4">
              <h5 class="section-semi-title">
                Bar Chart
              </h5>
              <bar-line-chart
                :labels='["Enero", "Febrero", "Marzo", "Abril", "Mayo", "Junio", "Julio", "Agosto", "Septiembre", "Octubre", "Noviembre", "Diciembre"]'
                :values='values'
                :valuesline='valuesline'
              />
            </div>

          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script type="text/babel">
import LineChart from '../../../components/chartjs/LineChart.vue'
import BarChart from '../../../components/chartjs/BarChart.vue'
import BarLineChart from '../../../components/chartjs/BarLineChart.vue'
import PieChart from '../../../components/chartjs/PieChart.vue'
import DoughnutChart from '../../../components/chartjs/DoughnutGraph.vue'

export default {
  components: {
    LineChart,
    BarChart,
    BarLineChart,
    PieChart,
    DoughnutChart,
    values:[],
    valuesline:[]
  },
  methods: {
    async fetchBarChartData ({ anio, sort }) {
      await axios.get(`/api/ingresos-por-mes/${anio}`).then(res=>{
        this.values=res.data.qty;
        this.valuesline=res.data.perc;
       });
    }
  },
  mounted() {
      this.fetchBarChartData({anio:2018});
  },
  data () {
    return {
      pieAndDoughtnut: {
        labels: ['Red', 'Blue', 'Yellow'],
        data: [300, 50, 100],
        bgColors: [
          '#FF6384',
          '#36A2EB',
          '#FFCE56'
        ],
        hoverBgColors: [
          '#FF6384',
          '#36A2EB',
          '#FFCE56'
        ]
      },
      values: this.values,
      valuesline: this.valuesline
    }
  }
}
</script>

BarLineChart.vue

<template>
  <div class="graph-container">
    <canvas id="graph" ref="graph"/>
  </div>
</template>

<script>
import Chart from 'chart.js'

export default {
  props: {
    labels: {
      type: Array,
      require: true,
      default: Array
    },
    values: {
      type: Array,
      require: true,
      default: Array
    },
    valuesline: {
      type: Array,
      require: true,
      default: Array
    }
  },

  mounted () {
    let context = this.$refs.graph.getContext('2d')
    let options = {
      responsive: true,
      maintainAspectRatio: false,
      legend: {
        display: false
      }
    }

    let data = {
      labels: this.labels,
      datasets: [
        {
          label: 'My First dataset',
          backgroundColor: 'rgba(79, 196, 127,0.2)',
          borderColor: 'rgba(79, 196, 127,1)',
          borderWidth: 1,
          hoverBackgroundColor: 'rgba(79, 196, 127,0.4)',
          hoverBorderColor: 'rgba(79, 196, 127,1)',
          data: this.values
        },
        {
          label: 'My First dataset',
          data: this.valuesline,
          type: 'line'
        }
      ]
    }

    this.myBarChart = new Chart(context, {
      type: 'bar',
      data: data,
      options: options
    })
  },

  beforeDestroy () {
    this.myBarChart.destroy()
  }
}
</script>

<style scoped>
.graph-container {
  height: 300px;
}
</style>

奇怪的是，如果我错误地将参数传递给了较低的组件，例如：

<line-chart
                :labels='["Enero", "Febrero", "Marzo", "Abril", "Mayo", "Junio", "Julio", "Agosto", "Septiembre", "Octubre", "Noviembre", "Diciembre"]'
                :values='values.data'
              />

将“.data”添加到值会中断该组件，但允许其他组件加载下面的图表。
有没有人在过去不得不处理这个问题？我用的是我在www.example.com上找到的一个 Jmeter 板laraspace.in，以防万一。
编辑：我已经把这个添加到代码框中，这样你就可以更容易地帮助我了。
https://codesandbox.io/embed/vue-template-x4z7b
编辑2：设法使它在沙箱中与本地值一起工作，但不知何故，当调用API时，它在本地不工作。