[Vuejs]-Component is not properly rendering in VueJs

by

1👍

Simply you are getting your variables from an API, and the JS code is being evaulated before finishing the request.

Simply, add a v-if condition to your tbody

    <tbody v-if="users">
        <tr v-for="user in users">
            <td>{{ user.id }}</td>
            <td>{{ user.name }}</td>
            <td>{{ user.email }}</td>
            <td>{{ user.address }}</td>
            <td>{{ user.created_at }}</td>
            <td>{{ user.updated_at }}</td>
        </tr>
    </tbody>

Also the methods should be updated

methods: {
    getAll () {
         this.$http.get('/api/users').then((response)=>{
               this.users = response.data;
          });
    }
}

And the ready function will be:

ready(){
     this.getAll();
}

0👍

First of all, you need to declare your default data.

export default {
    data () {
        return {
            users: []
        }
    }
}

Now you can setup your methods:

methods: {
    getAll () {
        return Vue.http.get('/api/users');
    }
}

Now we can bind to our ready () function. This will make our API call to get our users. From here, we need to make sure that our components instance of our users is fed the new JSON object that comes back from our RESTful endpoint.

ready () {
    this.users = this.getAll();
}

Now this should work correctly.

Leave a comment