Laravel vue data is not displayed in vue component

Question

I wish to display data from my API request but it seems to be something wrong with something I can't figure out what it is... The data is not displaying on the page when I try to loop. And I get the data from the API via the postman. Please if anything is not explained correctly just write something...

This is my api.php Route::get('/user', 'Api\UserController@index');

This is the Api\UserController:

public function index()
    {
        return UsersResource::collection(User::all());
    }

This is the vue script:

<script>
    export default {
        data: function () {
            return {
                users: [],
            }
        },
        mounted() {
            this.loadUsers();
        },
        methods: {
            loadUsers: function () {
                axios.get('api/user')
                    .then((response) => {
                        this.users= response.data.data;
                    })
                    .catch(function (error) {
                        console.log(error);
                    })
            }
        }
    }
</script>

And this is the table i'm trying to put the data in:

 <table >
          <tr>
          <th>
          <div class="form-text">
            TOP 10 USERS
          </div>
          </th>
          <th>RATING</th>
          <th>DEAL</th>
          <th>LINK</th>
          </tr>
          <tr v-for="user in users" :key="user.id">
          <td class="text-white">
              {{user.name}}
          </td>
          <td>/5</td>
          <td>% Discount</td>
          <td>
              <button class="btn buttonGlowGreen">VISIT</button>
         </td>
     </tr>
 </table>

Please add console.log(response.data.data); before this.users= response.data.data; and tell me what you got in console? — Pejman Zeynalkheyri
– Pejman Zeynalkheyri, Commented Feb 10, 2021 at 8:36
Open your vue console and in the components tab below the data, do you see users with that data? — Pejman Zeynalkheyri
– Pejman Zeynalkheyri, Commented Feb 10, 2021 at 8:43

Pejman Zeynalkheyri · Accepted Answer · 2021-02-10 08:20:12Z

1

In your loadUser method, you are getting the response by response keyword then you must be set that for your users object in vue.

So replace the this.users= users.data.data; by this.users= response.data.data;

methods: {
    loadUsers() {
        axios.get('api/user')
            .then((response) => {
                this.users= response.data.data;
            })
            .catch(function (error) {
                console.log(error);
            })
        }
    }
}

answered Feb 10, 2021 at 8:20

Pejman Zeynalkheyri

4,93810 gold badges35 silver badges42 bronze badges

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

1 Comment

Sagy Cohen Over a year ago

So sorry it was this.users= response.data.data; and it's my mistake . And it doesn't work even though .

Sagy Cohen · Accepted Answer · 2021-02-10 09:32:20Z

0

Managed to fix it by removing

<script src="{{mix('js/app.js')}}"></script>

which was under my

<div id="app">.

From my blade page. All working now!

edited Feb 10, 2021 at 9:32

answered Feb 10, 2021 at 9:11

Sagy Cohen

236 bronze badges

Collectives™ on Stack Overflow

Laravel vue data is not displayed in vue 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