Vue Js Axios 响应无法访问 this.data

Question

Vuejs axios get 不会从响应中更新 myData。

export default {
        data(){
            return {
                myData:'foo'   
            }
        },

        beforeMount() {

                    axios.get('/api/data').then((response)=>{ 
                    this.rowData = response.data;
                    this.myData=this.rowData;
                });
              }

        console.log(this.myData) //prints foo instead of this.rowData value


}

我希望 this.rowData 输出

Answer 1

axios.get() 返回一个Promise，所以当Promise 被解析时，你应该在分配后console.log() 它。直到 Promise 未解析，值仍将相同。

export default {
  data() {
    return {
       myData: "foo"   
     }
  },
  beforeMount() {
    axios.get("/api/data").then(response => { 
      this.rowData = response.data;
      this.myData = this.rowData;
      console.log(this.myData)
    });
  }
}