在Vue JS Laravel组件中传递数据属性

Question

Am new to Vue.js and I would like to pass the data propert value to my template.

I have:

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

In the HTML template I have:

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

Now I am getting an error of

cannot set property user of undefined

A console.log(response) produces:

name: "user 1", // name exists
email ...

Answer 1

Try using arrow function for axios callbacks

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

arrow function binds the components context as you expect.

Answer 2

In mounted:

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