SurveyJS不显示

Question

试图使用测量机与laravel和vue，但当我试图从api获得调查不起作用。我从拉拉控制器的api中获取数据。

​

​

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

如果我用常量替换变量的话。

          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"
                }
            ]
        }
    ]
};

Answer 1

您对代码的异步方面有问题。有一个回调函数，它在对api的请求完成时运行：

...
.then(response => {
       surveyJson = JSON.parse(response.data.data.json);
       console.log(JSON.parse(response.data.data.json));
    })
...

但你正试图把调查结果“放在”它的“外部”。换句话说，在api请求的回调有机会加载调查的JSON之前就运行了：

...
this.survey  = new SurveyVue.Model(surveyJson);
...

您应该在回调中移动实例化调查的行，如下所示：

...
.then(response => {
       surveyJson = JSON.parse(response.data.data.json);
       window.survey  = new SurveyVue.Model(surveyJson);
    })
...