创建数据透视表后，为什么我的数据没有显示？

Question

我正在构建一个Web应用程序，并且正在使用Vue js作为前端。在后端（Laravel），我在2个表loyer_profiles和job_posts之间创建了一个数据透视表。一个用户可以有一个个人资料，而一个个人资料可以有许多job_posts。

我已经创建了一个表，并且正在使用v-for循环来显示数据。如您所见，我可以从每个employerprofile中访问jobPosts，但是由于某种原因，当我尝试提取像jobPost.employerprofile.property这样的数据时，什么也没显示。

这是我的带有v-for循环的表：

<tr v-for="(jobPost, index) in jobPosts" :key="index">
    <td>
        <div class="job-company">{{jobPost.employerprofile.company_name}}</div>
    </td>
    <td><i class="fas fa-map-marker-alt"></i> {{jobPost.employerprofile.country}}</td>
    <td>
        <div class="full-time">{{jobPost.employment_type}}</div>
    </td>
    <td><i class="fa fa-credit-card"></i> ${{jobPost.salary}}</td>
    <td>
        <a href="#" class="apply-job-btn btn btn-radius theme-btn apply-it" data-post-id="457" data-user-id="1" title="Apply this job">
        <i class="flaticon-paper-plane"></i> Apply</a>
    </td>
</tr>

这是我console.log()时数据的屏幕截图。知道这里发生了什么吗？

Answer 1

如您在屏幕快照中所见，jobPost.employerprofile属性是一个数组，而不是对象。

该数组中似乎只有1个元素，因此您只需获取第一个索引：

{{jobPost.employerprofile[0].company_name}}

建议：

如果您不知道为什么不显示某些属性，只需尝试将其显示在页面上的循环之外，通常会更容易知道发生了什么。

如果您执行以下操作，则会发现问题：

<!-- This would show you an array -->
{{jobPosts[0].employerprofile}}

<!-- This wouldn't return anything, so you would realise that
something is wrong with "employerprofile" -->
{{jobPosts[0].employerprofile.company_name}}