laravel 中的 vue-chartjs，vuejs 使用 API Axios答案

【问题标题】：vue-chartjs in laravel,vuejs using API Axioslaravel 中的 vue-chartjs，vuejs 使用 API Axios
【发布时间】：2020-02-15 22:15:15
【问题描述】：

我正在尝试在 Dashboard.vue 的图表中显示所有公司的年份，但它没有显示任何内容，而且我已经尝试了很多天，如果有人可以帮助我，他会非常好。

我的 API/路由是：

Route::apiResources(['company'=>'API\CompanyController']);

EmployeeController 代码是：

public function index(){return Employee::all();}

Chart.vue 中的代码是：

<script>
import { Line } from "vue-chartjs";
export default {
  extends: Line,
  data() {
    return {
      url: "api/company",
      years: [],
      labels: [],

      data: ""
    };
  },

  methods: {
    getProducts() {
      axios.get(this.url).then(response => {
        this.data = response.data;
        if (this.data) {
          this.data.forEach(element => {
            this.years.push(element.created_at);
            this.labels.push(element.name);

          });
          this.renderChart(
            {
              labels: this.years,
              datasets: [
                {
                  label: "list of Companies ",
                  backgroundColor: "#f87979",
                  data: this.name
                }
              ]
            },
            { responsive: true, maintainAspectRatio: false }
          );
        } else {
          console.log("NO DATA");
        }
      });
    }
  },
  mounted() {
    this.getProducts();
  }
};
</script>

app.js 中的代码是：

Vue.component('chart-component', require('./components/Chart.vue'));

仪表板中的代码是：

<template>
  <div class="container">

    <chart-component></chart-component>
  </div>
</template>

【问题讨论】：

标签： mysql laravel api vue.js vue-chartjs

【解决方案1】：

我解决了，问题是我没有输入.default，所以我修改如下：

Vue.component('chart-component', require('./components/Chart.vue').default);

【讨论】：