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

Question

I cannot get or display data from an API but the API is working fine when I console.log the issue. but I cannot display data in my table I used v-for I am new to Vue.js I don't know how to solve this issue

I am using Vue.js 2, Axios method to connect to my API

here's my code

import axios from 'axios'

export default{
  data(){
    return{
      errorMessage: "",
      successMessage: "",
      users: []
    }
  },
  mounted: function(){
    this.getAllUsers();
  },
  methods:{
    getAllUsers: function(){
      axios.get('http://localhost:8888/vue-and-php/public/api/config.php?action=read', { crossdomain: true })
      .then(function(response){
        //console.log(response);
        if(response.data.error){
          app.errorMessage = response.data.message;
        }else{
          app.users = response.data.users;
        }
      });
    }
  }
}

THIS IS WHERE I WANT TO DISPLAY MY DATA

                <!--test PHP-->
                  <button class="fright addNew btn-sm btn-success" data-toggle="modal" data-target="#exampleModalLong">Add New</button>
                  <p class="errorMessage alert alert-danger" v-if="errorMessage">
                    {{errorMessage}}
                  </p>
                  <p class="successMessage alert alert-success" v-if="successMessage">
                    {{successMessage}}
                  </p>
                  <table class="table">
                    <tr>
                      <th>ID</th>
                      <th>User Name</th>
                      <th>Name</th>
                      <th>Email</th>
                      <th>Edit</th>
                      <th>Delete</th>
                    </tr>
                    <tr v-for="user in users">
                      <td>{{user.id}}</td>
                      <td>{{user.username}}</td>
                      <td>{{user.name}}</td>
                      <td>{{user.email}}</td>
                      <td><button class="btn btn-sm btn-success">ADD</button></td>
                      <td><button class="btn btn-sm btn-danger">DELETE</button></td>
                    </tr>
                  </table>

Why do you set the response to app.users? I would expect this.users... — Simon Thiel
– Simon Thiel, Commented Apr 26, 2019 at 6:33

Vaibhav Singh · Accepted Answer · 2019-04-26 06:34:49Z

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;
}

answered Apr 26, 2019 at 6:34

Vaibhav Singh

4604 silver badges13 bronze badges

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

Comments

Being MR.G · Accepted Answer · 2019-04-26 07:21:03Z

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;
        }
        });
    }

Arthur · Accepted Answer · 2019-04-26 06:44:49Z

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.

answered Apr 26, 2019 at 6:44

Arthur

1088 bronze badges

2 Comments

Being MR.G Over a year ago

Thank you for your time but I did exactly what you said but I am getting errors it says "Faq.vue?2d60:172 Uncaught (in promise) TypeError: Cannot set property 'users' of undefined at eval (Faq.vue?2d60:172)"

Arthur Over a year ago

@BeingMR.G: Probably because you're not binding this with your method. Try and prefer this: ` getAllUsers() {...} ` instead of ` getAllUsers: function(){ `

Collectives™ on Stack Overflow

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

3 Answers 3

Comments

Comments

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

2 Comments

Related