CODEWITHSUNDEEP
loopsvue.jssingle-page-application
Ryan Sacks
Ryan Sacks

Reputation: 524

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

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. enter image description here

Upvotes: 0

Views: 51

Answers (2)

tuhin47
tuhin47

Reputation: 6068

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

Upvotes: 1

jcoleau
jcoleau

Reputation: 1200

try to call loadProfile on created vs mounted :

created() {
   this.loadProfile();
}

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

await this.$nextTick()

Upvotes: 0

Related Questions