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