Saya menambah contoh mudah ini daripada apexcharts.com. Agak pasti import itu betul. Saya tidak merujuk tetingkap di mana-mana. Apabila menambah fail ini seluruh aplikasi saya berhenti. Saya percaya ini ada kaitan dengan konfigurasi SSR atau Nuxt.
<template> <div id="chart"> <apexchart type="donut" width="380" :options="chartOptions" :series="series" ></apexchart> </div> </template> <script> import VueApexCharts from "vue-apexcharts"; export default { name: "Donut", components: { apexchart: VueApexCharts, }, data() { return { data: { series: [44, 55, 41, 17, 15], chartOptions: { chart: { type: "donut", }, responsive: [ { breakpoint: 480, options: { chart: { width: 200, }, legend: { position: "bottom", }, }, }, ], }, }, }; }, }; </script>
SSR/SSG pecah apabila membungkus komponen anda dalam objek nuxt
<client-only>
组件中。这将防止在尝试引用不存在的window
.Sebagai contoh
Seperti yang dijelaskan dalam jawapan terpaut saya (ayat terakhir, menggunakan sintaks komponen langsung), berikut ialah cara untuk membuat persediaan berfungsi yang betul:
Saya juga mengeluarkan satu
data
,它嵌套了整个配置,已经在data()
di dalam. Ini mengakibatkan ketidakpadanan prop, seperti yang ditunjukkan dalam ralat konsol penyemak imbas.