如何使用惯性js将laravel后端的Json格式化数据显示到vue js GChart（vue-google-charts）中

Question

我正在尝试将来自我的 laravel 后端的 json 数据显示为可视数据（图形），尽管当我尝试

<script>
import Layout from '@/Shared/Layout'
import { GChart } from "vue-google-charts";

export default {
    metaInfo: {
        title: 'Dashboard'
    },
    layout: Layout,
    components: {
        GChart,
    },
    props: {
        pie: Object

    },
    data() {
        return {
            chartData: pie,
            options: {
                width: 1100,
                height: 450
            }
        };
    }
}
</script>

我收到“表没有列”的购物车错误，我尝试将代码调整为chartData:this.pie认为在这种情况下没有显示任何内容，因此感到困惑。 下面是一些屏幕截图，显示了网络检查选项卡中的道具。

[["Client","Assets"],["MARKH INVESTMENTS",209]] 是我想在图表中呈现的数据的一部分 下面的 div 标签也是用于呈现图表的代码。

<template>
    <div>
        <h1 class="mb-8 font-bold text-3xl">Dashboard</h1>
        <p class="mb-8 leading-normal">{{pie}} </p>
        <GChart type="PieChart" :options="options" :data="chartData" />
    </div>
</template>

Answer 1

该错误是从道具返回数据时引起的。

 props:{
   pie:Object

  },

必须返回一个数组，而不是返回 object

props:{
   pie:Array

  },

然后在渲染中必须使用this。 财产

  return {
      chartData:this.pie,
      options: {
        width: 1100,
        height: 450
      }
    };