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

Posted 2023-02-22

【中文标题】laravel 中的 vue-chartjs，vuejs 使用 API Axios

【英文标题】：vue-chartjs in laravel,vuejs using 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>

【参考方案1】：

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

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