在Vue JS Laravel組件中傳遞數據屬性

Question

Vue.js的新手，我想將數據屬性值傳遞給我的模板。

我有：

export default {
  name: "profile",
  data: () => ({
    user:[]
  }),
  mounted() {
    axios
      .get('/api/user')
      .then(function (response) {
        this.user = response
      })
      .catch(function (response) {
        console.error(response);
      });
  }
}

在HTML模板中，我有：

<template>
  <div>{{user.name }}</div>
</template>

現在我得到一個錯誤

無法將屬性user設置為undefined

console.log(response)產生：

名稱：“用戶1”，//名稱存在
電子郵件...

Answer 1

嘗試將arrow function用於axios回調

.then((response) => {
    this.user = response
}) 

arrow function按預期方式綁定了組件上下文。

Answer 2

已安裝：

mounted() {
    var self = this;
    axios.get('/api/user')
        .then(function (response) {
           self.user = response
        })
        .catch(function (response) {
           console.error(response);
        });
     }
}