Vue.js中如何正确为this.form.answer变量赋值？

• 第一是异步执行顺序问题：axios.get是异步网络请求，代码执行时会先发送请求，不等服务端返回结果就会直接执行后续的answer = this.form.answer逻辑，此时then回调还没触发，this.form.answer还没被赋值，就会触发未定义报错。
• 第二如果是Vue2项目，若初始化form对象时没有预先声明answer属性，也可能触发响应式相关的变量不存在提示，不过你已经使用了this.$set赋值，这部分影响不大，核心还是异步顺序问题。

方法1：将后续逻辑放入then回调 #

保证请求返回、赋值完成后再执行依赖this.form.answer的逻辑：

axios
  .get("/api/rut/" + this.form.rut + "/edit?api_token=" + App.apiToken)
  .then((response) => {
    this.post = response.data;
    this.$set(this.form, "answer", this.post);
    // 所有用到this.form.answer的逻辑都写在then内部
    var answer = this.form.answer;
    // 后续其他操作
  });

方法2：使用async/await语法简化异步写法 #

代码逻辑更直观，避免回调嵌套，注意外层函数需要添加async关键字：

// 示例为Vue的methods方法，普通函数同理添加async前缀即可
async fetchRutData() {
  const response = await axios.get("/api/rut/" + this.form.rut + "/edit?api_token=" + App.apiToken)
  this.post = response.data
  this.$set(this.form, "answer", this.post)
  var answer = this.form.answer
  // 后续其他操作
}

Vue2项目中初始化form对象时，建议预先声明answer属性，初始值可设为null、空对象或空数组，进一步避免响应式相关的异常：

// 初始化示例
data() {
  return {
    form: {
      rut: '',
      answer: null // 预先声明属性
    },
    post: null
  }
}

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