如何使用惯性js显示来自laravel后端和vue js GChart（vue-google-charts）的Json格式数据答案

【问题标题】：How to display Json formated data from laravel backend into vue js GChart(vue-google-charts) using inertia js如何使用惯性js显示来自laravel后端和vue js GChart（vue-google-charts）的Json格式数据
【发布时间】：2022-01-21 22:10:57
【问题描述】：

我正在尝试将来自我的 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>

【问题讨论】：

标签： laravel vue.js google-visualization inertiajs

【解决方案1】：

从props返回数据时出错。

 props:{
   pie:Object

  },

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

props:{
   pie:Array

  },

然后在渲染中必须使用 this.属性

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

【讨论】：