国产av日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂

Nuxt.js:窗口未定義 apexcharts/vue-apexcharts
P粉366946380
P粉366946380 2023-11-09 22:07:08
[Vue.js討論組]

我從 apexcharts.com 添加了這個簡單的示例。很確定導入是正確的。我沒有在任何地方引用窗口。添加此文件時,我的整個應用程序就停止了。我相信這與 SSR 或 Nuxt 配置有關(guān)。

<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>


P粉366946380
P粉366946380

全部回復(2)
P粉946437474

將您的組件包裝在 nuxt 的 <client-only> 組件中。這將防止在嘗試引用不存在的 window 對象時 SSR/SSG 中斷。

例如

P粉834840856

正如我的鏈接答案中所解釋的(最后一句,使用直接組件語法),以下是如何制作正確的工作設置:

我還刪除了一個 data,它嵌套了整個配置,已經(jīng)在 data() 內(nèi)部。這導致了 props 不匹配,如瀏覽器控制臺錯誤所示。

最新下載
更多>
網(wǎng)站特效
網(wǎng)站源碼
網(wǎng)站素材
前端模板
關(guān)于我們 免責申明 意見反饋 講師合作 廣告合作 最新更新
php中文網(wǎng):公益在線php培訓,幫助PHP學習者快速成長!
關(guān)注服務號 技術(shù)交流群
PHP中文網(wǎng)訂閱號
每天精選資源文章推送
PHP中文網(wǎng)APP
隨時隨地碎片化學習
PHP中文網(wǎng)抖音號
發(fā)現(xiàn)有趣的

Copyright 2014-2025 http://m.miracleart.cn/ All Rights Reserved | php.cn | 湘ICP備2023035733號