Vue v-for no data display using Laravel and Vuejs

Question

Im using v-for and axios for displaying data but when I run my website, the data wont show but there are no errors in the console and in my vue developer tool, I can see the data in it. Can someone help me?

Users.vue

 <table id="table" class="table table-striped table-bordered">
                      <thead>
                        <tr>
                          <th>Id</th>
                          <th>Name</th>
                          <th>Email</th>
                          <th>Type</th>
                          <th>Created</th>

                        </tr>
                      </thead>
                      <tbody>
                    <tr v-for="user in users.data" :key="user.id">
                        <td>{{user.id}}</td>
                        <td>{{user.name}}</td>
                        <td>{{user.email}}</td>
                        <td>{{user.type}}</td>
                        <td>{{user.created_at}}</td>
                        </tr>
                      </tbody>
    </table>

script>
    export default {
       data() {
    return {

      users: {},
      form: new Form({
        id:'',
        name: "",
        email: "",
        password: "",
        type: "",
      })
    };
  },
  methods: {
      loadUsers(){
           axios.get("api/user").then(({ data }) => (this.users = data));
      }
  },
    created() {
            console.log('Component mounted.')
            this.loadUsers()

        }
    }

</script>

api.php

Route::apiResource('user', 'API\UserController');

UserController.php

<?php

namespace App\Http\Controllers\API;


use Illuminate\Http\Request;
use App\Http\Controllers\Controller;
use App\User;
class UserController extends Controller
{
    /**
     * Display a listing of the resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function index()
    {
        return User::all();
    }

}

jremi · Accepted Answer · 2019-08-05 03:35:51Z

2

Try this...

<tr v-for="user in users" :key="user.id">

answered Aug 5, 2019 at 3:35

jremi

2,9895 gold badges29 silver badges37 bronze badges

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

6 Comments

draw134 Over a year ago

It works sir!. Can you explain to me why my code isn't working?

draw134 Over a year ago

Can you please help me with my other question sir? I need it really. Here is the link. (stackoverflow.com/questions/57336689/…)

jremi Over a year ago

You have your v-for="user in users.data" .... This is undefined because when your axios request completed you assigned this.users directly to an array which was data. For the v-for to work it needs to loop over the array which was set to this.users and NOT the non-existent this.users.data

Sweet Chilly Philly Over a year ago

I tend to not fetch the data on the same component as where you use it, as it causes reactivity issues. Fetch your data one level up, and push it to your component as a prop. This safe guards a lot of loading stuff, like refreshing the page

draw134 Over a year ago

ahh. I see sir, thats why it not displays.. Thanks. Do you have another idea about my second question in the link sir? or suggestions? Im new in vue and im sorry

|

Collectives™ on Stack Overflow

Vue v-for no data display using Laravel and Vuejs

1 Answer 1

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related