axios 将vue.js formulate中的输入初始值设置为数据库中的数据

o7jaxewo  于 2022-11-05  发布在  iOS
关注(0)|答案(1)|浏览(124)

我尝试使用Axios从mySQL数据库中获取数据,以设置使用vue.js-formulate生成的表单输入的初始值。
下面是我要设置“question 1”的初始值的脚本:

new Vue({
            el: '#app',
            created() {
                this.fetchData();
            },

            data: {
                row: "",
                values: {
                    question1: this.row["answerq1"],
                }
            },
            methods: {
                fetchData() {
                    axios.get('retrieve.php')
                        .then(function (response) {
                            this.row = response.data;
                            // Checking output in Console:
                            console.log(this.row["answerq1"]);

                        });
                },
}
})

fetchData()函数正常工作,this.row[“answerq 1”]输出了预期的字符串。但是,在数据部分访问该值会产生错误“this.row is undefined”。我猜这与created()钩子的生命周期有关,但我无法理解。

z5btuh9x

z5btuh9x1#

在API请求完成之前,this.row是空字符串,因此您无法访问this.row["answerq1"]。您需要等待API请求完成。
进行以下更改,它应该可以正常工作:

data() {
  return {
    row: "",
    values: {
      question1: "" // set to empty string
    }
  };
}

相关问题