时间戳

首页 > 解决方案 > laravel 中的 vue-chartjs，vuejs 使用 API Axios

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

问题描述

我试图在 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>

标签： mysqllaravelapivue.jsvue-chartjs

解决方案

我解决了问题是我没有把.default它修改如下：

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

推荐阅读