Laravel Nova - 定制卡带包

Question

为了使用Chartkick，我创建了一张自定义卡片。此自定义卡将有一个选择下拉列表，它将发出 Axios 请求以从 API 获取数据并将其显示在图表中，尽管我的问题是即使使用硬编码的虚拟数据也不会显示图表，如下所示：

<template>
    <card class="flex flex-col items-center justify-center">
        <span>Ben</span>
        <line-chart class="lcs" :data="chart_data"></line-chart>
    </card>
</template>

<script>
import Vue from "vue";
import Chartkick from "vue-chartkick";
import Chart from "chart.js";
Vue.use(Chartkick.use(Chart));
export default {
    props: ["card"],
    data() {
        return {
            chart_data: {
                "2017-05-13": 2,
                "2017-05-14": 5
            }
        };
    }
};
</script>

<style scoped>
.flex {
    min-height: 950px;
}
</style>

卡片正在工作并显示在仪表板上。我只是放置了 span 标签并输出一个名称来确认这一点，如下所示：

我使用盒子的 CSS 来确保图表没有被隐藏，从改变的形状可以看出。

我似乎无法显示图表，并且不确定做错了什么。

Answer 1

您的组件没有在页面中呈现，您应该编译您的资产并在 NovaServiceProvider 中注册它们

npm run dev

在你的 Laravel 应用的启动功能中

use Laravel\Nova\Events\ServingNova;

class NovaServiceProvider extends NovaApplicationServiceProvider
{
/**
 * Bootstrap any application services.
 *
 * @return void
 */
public function boot()
{
    $this->app->booted(function () {
        $this->routes();
    });

    Nova::serving(function (ServingNova $event) {
        Nova::script('{{ component }}', __DIR__.'/../dist/js/card.js');
    });
}

来自Docs