[Vuejs]-I cannot display data form an API using v-for in vuejs

by

3👍

✅

You cannot do 

app.users = response.data.users;

Since app is not defined anywhere and your browsers console must be throwing an error, what are trying to do over here is assigning the users you have defined in data function.

That users object is present in current context and can be accessed through ‘this’ keyword.

Try : 

if(response.data.error){
    this.errorMessage = response.data.message;
}
else{
    this.users = response.data.users;
}
👤Vaibhav Singh

2👍

Thank you guys for your time I used your code but with little corrections

this is the final code that works 

    getAllUsers: function(){
      axios.get('http://localhost:8888/vue-and-php/public/api/config.php?action=read', { crossdomain: true })
      .then((response) => {
        //console.log(response);
        if(response.data.error){
          this.errorMessage = response.data.message;
        }else{
          this.users = response.data.users;
        }
        });
    }
👤Being MR.G

0👍

You probably want to set some information into your users data field. You need to do something like:

if (response.data.error) {
    this.errorMessage = response.data.message;
} else {
    this.users = response.data.users;
}

Explanation: Vue reacts to changes in data and props. By doing this.users = response.data.users, you are telling Vue that the users have changed and then Vue will re-render based on how you’ve used users inside your template.

👤Arthur

Leave a comment