如何使用Vue js使用v-for循环显示动态数据？

Question

我有一个名为候选人表的表，表中有几列。即使一个用户只能有一个配置文件，我还是想知道如何使用v-for循环显示数据，因为我将在应用程序的其他页面中使用它。

当我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>

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

下面是控制台中数据的屏幕截图。

Answer 1

尝试在已创建的vs已安装的上调用loadProfile：

created() {
   this.loadProfile();
}

或添加，然后再将变量分配给this.profiles：

await this.$nextTick()

Answer 2

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