Nuxt + SurveyJS：使用 nuxt generate 或 nuxt build 时 - 超出最大调用堆栈大小答案

【问题标题】：Nuxt + SurveyJS : When using nuxt generate or nuxt build - get a maximum call stack size exceededNuxt + SurveyJS：使用 nuxt generate 或 nuxt build 时 - 超出最大调用堆栈大小
【发布时间】：2021-06-04 09:14:07
【问题描述】：

我的survey-vue (surveyJS) 在dev 上运行良好，但是当我尝试部署时，在登陆带有调查组件的页面时出现最大调用堆栈大小超出错误。我在想这是我导入插件的方式，但我不确定。

插件/survey-vue.js

import Vue from "vue";
import * as surveyVue from "survey-vue";

Vue.use(surveyVue);

nuxt.config.js

plugins: [
    ...
    {
      src: '~/plugins/survey-vue',
      mode: 'client'
    },
]

组件/Survey.vue

<template>
  <div id="surveyElement" class="w-full inline-block">
      <survey :survey="surveyRender" />
  </div>
</template>

<script>
import * as surveyVue from "survey-vue";
export default {
  props: {
    json: {
      type: Object
    },
    results: {
      type: Object
    }
  },
  data() {
    const jsonSurvey = this.json;
    const survey = new surveyVue.Model(jsonSurvey);

    // style the survey 
    var myCss = {...};
    
    survey.onComplete.add(survey => {
      this.result = survey.data;
      this.sendResults()
    })

    survey.css = myCss
    return {
      surveyRender: survey,
      result: []
    }
  },
  methods: {
    sendResults () {
      this.$emit('resultCaptured', this.result)
    }
  },
  created () {

  }
}
</script>

pages/.vue

<template>
  <div class="flex flex-col justify-center mx-auto w-full md:w-1/2 px-4">
    <div class="w-auto mx-auto p-4 mt-12" v-if="surveyCreated">
      <client-only>
        <survey :json="json" :results="reportedSymptoms"></survey>
      </client-only>
    </div>
  </div>
</template>
....

感谢您的任何见解。试了好几天都没用。

【问题讨论】：

此错误通常来自无限循环。
已修复：我调用了我的组件 Survey.vue，它与插件调查保留的名称相同。将我的组件文件更改为 SurveyComponent.vue 并解决。感谢@kissu 让车轮转动
确实，Vue 样式指南建议为所有组件添加前缀以避免此类冲突：vuejs.org/v2/style-guide/…
很有道理！

标签： vue.js nuxt.js surveyjs

【解决方案1】：

已修复：我调用了我的组件文件 Survey.vue，它与为插件的调查实例保留的名称相同。将我的组件文件更改为 SurveyComponent.vue 并解决。感谢@kissu 让车轮转动

【讨论】：