Laravel+Vue项目调用API获取数据时SurveyJS无法正常显示

问题场景 #

在Laravel与Vue搭建的项目中集成SurveyJS，通过API从Laravel控制器获取问卷数据时，SurveyJS无法正常渲染显示。

原surveyshow.vue文件核心代码如下：

<template>    
    <div>
        <survey :survey="survey"></survey>
    </div>
</template>  


created () {
...
  let url = `/api/edit/i130`;
         
             axios
                .get(url)
                .then(response => {
                     surveyJson = JSON.parse(response.data.data.json);
                     console.log(JSON.parse(response.data.data.json));
        
                })
                 .catch(function (error) {
                    console.log(error);
                });
        this.survey  = new SurveyVue.Model(surveyJson);

使用本地硬编码常量替换异步获取的surveyJson时，SurveyJS可正常运行，测试常量代码如下：

var  surveyJson = {
    pages: [
        {
            "name": "Address",
            "title": "Address",
            "questions": [
                {
                    "type": "text",
                    "name": "address1",
                    "title": "Street Address",
                    "autocompleteAs": "placeautocomplete"
                }, {
                    "type": "text",
                    "name": "address2",
                    "title": "Address Line 2"
                }
            ]
        }
    ]
};

核心故障原因 #

• 代码存在异步执行时序错误：Axios的GET请求是异步非阻塞逻辑，代码发起请求后不会等待接口返回结果，会直接向下执行new SurveyVue.Model(surveyJson)的初始化逻辑，此时surveyJson还未被接口返回值赋值，SurveyJS拿到无效配置自然无法渲染。硬编码常量是同步赋值，不存在等待延迟，因此可以正常运行。
• 原代码存在变量作用域漏洞：surveyJson未通过let/const做块级声明，直接赋值会泄露为全局变量，进一步加剧了取值异常的问题。

排查与解决步骤 #

• 第一步：校验接口返回数据格式
  打开浏览器控制台查看接口返回的response.data.data.json内容，确认其结构和测试用的硬编码常量完全一致，无字段缺失、JSON语法错误。如果Laravel端已经通过模型属性转换（如$casts）将json字段转为数组/对象返回，Axios拿到的会是原生JS对象，不需要额外调用JSON.parse，重复解析会触发语法错误导致初始化失败。
• 第二步：修正异步执行时序
  将Survey模型的初始化逻辑移动到Axios请求的then回调内部，确保拿到有效问卷配置后再执行实例化，同时给组件增加渲染判断，避免未拿到数据时提前挂载Survey组件。
  修正后的核心代码如下：

<template>    
    <div>
        <!-- 数据加载完成后再渲染Survey组件 -->
        <survey :survey="survey" v-if="survey"></survey>
        <div v-else>问卷加载中...</div>
    </div>
</template>  

<script>
// 按自身项目使用的Vue版本正确引入Survey依赖，示例为Vue2版本写法
import * as SurveyVue from 'survey-vue'
export default {
    components: {
        survey: SurveyVue.Survey
    },
    data() {
        return {
            survey: null // 初始化survey为null
        }
    },
    created() {
        const url = `/api/edit/i130`;
        axios.get(url)
            .then(response => {
                // 兼容接口返回字符串/对象两种格式，避免重复parse报错
                const rawJson = response.data.data.json
                const surveyJson = typeof rawJson === 'string' ? JSON.parse(rawJson) : rawJson
                // 拿到有效配置后再初始化模型，赋值给响应式变量
                this.survey = new SurveyVue.Model(surveyJson)
            })
            .catch(error => {
                console.error('问卷加载失败：', error)
            })
    }
}
</script>

常见额外注意点 #

• 如果使用Vue3，需要引入对应Vue3版本的SurveyJS依赖（如survey-vue3-ui），初始化写法按对应版本官方文档调整即可，核心逻辑还是要等接口返回后再初始化实例。
• 可以在then回调里打印surveyJson和硬编码的测试常量做深比较，确认字段完全一致，避免接口返回的配置缺少SurveyJS要求的必填字段。

内容的提问来源于stack exchange，提问作者NeDiaz