How to display dynamic data using v-for loop using Vue js?

Question

I have a table called candidate_profiles with several columns inside of it. Even though a User can have only one profile, I'd like to know how to display the data using a v-for loop because I will need this in other pages of the application.

When I console.log(response) , I can see the data in the console, but it's not displaying. What am I missing?

CandidateProfileIndex.vue:

<template>
    <div>
        <table class="table">
            <thead>
                <tr>
                    <th>Id</th>
                    <th>experience</th>
                    <th>skills</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="(profile, index) in profiles" :key="index">
                    <td>{{profile.id}}</td>
                    <td>{{profile.experience}}</td>
                    <td>{{profile.skills}}</td>
                </tr>
            </tbody>
        </table>
    </div>
</template>

<script>
    import * as profileService from '../../services/candidate_profile_service.js';

    export default {
        name: "candidateProfileIndex",

        data() {
            return {
                profiles: [],
            };
        },

        mounted() {
            this.loadProfile();
        },

        methods: {
            loadProfile: async function() {
                try {
                    const response = await profileService.loadProfile();
                    console.log(response);
                    this.profiles = response.data.data;
                    console.log(this.profiles);
                } catch (error) {
                    this.$toast.error("Some error occurred, please refresh!");
                }
            }
        }
    }
</script>

candidate_profile_service.js:

import {http, httpFile} from './http_service';

export function createProfile(data) {
    return httpFile().post('candidate-profile', data);
}

export function loadProfile() {
    return http().get('/candidate-profile/create');
}

Below is a screenshot of the data in the console.

Won't it be this.profiles = response.data?

Anurag Srivastava
– Anurag Srivastava

2020-04-13 21:16:12 +00:00
Commented Apr 13, 2020 at 21:16 — Anurag Srivastava
– Anurag Srivastava, Commented Apr 13, 2020 at 21:16

tuhin47 · Accepted Answer · 2020-04-14 04:09:19Z

1

Your loadProfile method has some issue. You need to access the response.data.

loadProfile: async function() {
  try {
    const response = await profileService.loadProfile();
    console.log(response);
    this.profiles = response.data;
    console.log(this.profiles);
  } catch (error) {
    this.$toast.error("Some error occurred, please refresh!");
  }
}

answered Apr 14, 2020 at 4:09

tuhin47

6,2735 gold badges22 silver badges37 bronze badges

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

Comments

jcoleau · Accepted Answer · 2020-04-13 23:51:20Z

0

try to call loadProfile on created vs mounted :

created() {
   this.loadProfile();
}

or add, before you assign the variable to this.profiles :

await this.$nextTick()

answered Apr 13, 2020 at 23:51

jcoleau

1,20010 silver badges20 bronze badges

Collectives™ on Stack Overflow

How to display dynamic data using v-for loop using Vue js?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related