【问题标题】:Get surveyjs questions from db从 db 获取调查问卷问题
【发布时间】:2019-08-25 00:59:23
【问题描述】:

我在 vue 中使用surveyjs,并试图从我的 API 中获取我的var json 问题。

使用vue-resource,我向API发出GET请求,并将响应保存在questions并放在var json

export default {
    components: {
           Survey
    },
    data(){
           this.$http.get('api')
           .then(res => res.json())
           .then(questions => {
               this.questions = questions;
           });
           var json = this.questions;
           var model = new SurveyVue.Model(json);
           return {
               survey: model,
               questions:''
           }
    }
}

使用console.log(json),我得到undefined。那么,在这种情况下,访问 API 响应的正确方法是什么?

【问题讨论】:

    标签: vue.js surveyjs


    【解决方案1】:

    我认为你可以使用这样的东西:

    export default {
        components: {
               Survey
        },
        data() {
            return {
                survey: {},
                questions: ''
            }
        },
        mounted() {
            let self = this;
            this.$http.get('api')
               .then(questions => {
                   self.questions = questions;
               });
            this.survey = new SurveyVue.Model(this.questions);
        }
    }
    

    您可以了解有关mounted 方法here 的更多信息。您现在应该可以访问您的调查数据了。

    【讨论】:

    • 现在我可以看到“调查中没有可见的页面或问题”。来自surveyjs 的消息,但我在控制台中收到错误TypeError: Cannot read property 'root' of undefined"
    • 所以你的问题对我来说太过分了,我认为这可能是 SurveyJS 和我的方法的问题,但我从未使用过 SurveyJS,所以在这一点上我无法帮助你。如果我解决了您的主要问题,请随时告诉我。 :)
    • 我做了一些调试,this.questionsthis.survey = new SurveyVue.Model(this.questions) 中是空白的。如果我在this.questions = questions 后面加上console.log(this.questions),我可以毫无问题地看到API 响应。
    • 好吧,我很糟糕。在您的 http 请求中使用 this 并不是指正确的元素。您可以在 mounted() 方法的开头添加 let self = this; 吗?然后你可以在你的回调中引用self.questions,它会变成self.questions = questions
    • 另一个调试,this.questions 显示为{__ob__: Observer},没有我的 API 发送的属性。如果我在 vue 资源回调中使用console.log(self.questions),我可以看到 API 响应。我试过Object.assign({}, this.questions)JSON.parse(JSON.stringify(this.questions)),但没有成功。
    猜你喜欢
    • 2021-11-25
    • 1970-01-01
    • 2010-09-25
    • 1970-01-01
    • 1970-01-01
    • 2022-01-20
    • 2011-03-18
    • 2020-08-29
    • 2021-12-11
    相关资源
    最近更新 更多