Vue.js Formulate表单从MySQL设初始值报错：this.row未定义

核心问题 #

1. data初始化时机冲突：Vue初始化data是同步执行的，此时fetchData的异步请求还未完成，row还是初始的空字符串，直接访问this.row["answerq1"]必然会报undefined。
2. this指向错误：axios.get的then回调用了普通function，此时this指向的不是Vue实例，导致你给this.row赋值的操作并没有修改Vue实例中的row数据（你看到的console.log输出大概率是误操作了全局变量）。

修正后的代码 #

new Vue({
    el: '#app',
    created() {
        this.fetchData();
    },
    data: {
        row: {}, // 初始化为空对象更适配接口返回的数据类型
        values: {
            question1: '' // 先设空初始值，异步拿到数据后再更新
        }
    },
    methods: {
        fetchData() {
            axios.get('retrieve.php')
                .then((response) => { // 改用箭头函数，保证this指向Vue实例
                    this.row = response.data;
                    // 数据获取完成后，再给表单初始值赋值
                    this.values.question1 = this.row["answerq1"];
                    console.log(this.row["answerq1"]);
                })
                .catch((error) => {
                    // 增加错误捕获，方便排查请求异常
                    console.error('数据获取失败:', error);
                });
        }
    }
})

关键说明 #

• 把row初始值改成空对象{}，避免用字符串类型去访问属性的类型错误。
• 先给values.question1设空值，等异步请求拿到数据后再动态赋值，这样能保证Vue Formulate输入框拿到正确的初始值。
• 箭头函数替代普通function作为回调，确保this始终指向当前Vue实例，正确修改data中的数据。

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