Passing data properties in vue js laravel component

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 ...

Jagan · Accepted Answer · 2017-09-21 07:44:42Z

1

Try using arrow function for axios callbacks

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

arrow function binds the components context as you expect.

answered Sep 21, 2017 at 7:44

Jagan

5,2567 gold badges41 silver badges61 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Geoff Over a year ago

Thanks, this works, also i had to make a few changes ive realized that response i needed to use this.user=response.data

Kumar_14 · Accepted Answer · 2017-09-21 08:03:53Z

0

In mounted:

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

answered Sep 21, 2017 at 8:03

Kumar_14

5843 silver badges15 bronze badges

Collectives™ on Stack Overflow

Passing data properties in vue js laravel component

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related