Как отобразить данные Dynami c, используя v-for l oop, используя Vue js?

Question

У меня есть таблица под названием candid_profiles с несколькими столбцами внутри. Несмотря на то, что у пользователя может быть только один профиль, я хотел бы знать, как отображать данные с помощью v-for l oop, потому что это понадобится мне на других страницах приложения.

Когда я console.log(response), я вижу данные в консоли, но они не отображаются. Чего мне не хватает?

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>

candid_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');
}

Ниже приведен скриншот данных в приставка.

Answer 1

Ваш метод loadProfile имеет некоторые проблемы. Вам необходимо получить доступ к 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!");
  }
}

Answer 2

попробуйте вызвать loadProfile для созданного или подключенного:

created() {
   this.loadProfile();
}

или добавить, прежде чем назначить переменную this.profiles:

await this.$nextTick()