Почему мои данные не отображаются после создания сводной таблицы? - PullRequest
Новая
       4

Почему мои данные не отображаются после создания сводной таблицы?

1 голос
/ 05 мая 2020

Я создаю веб-приложение и использую Vue js в качестве внешнего интерфейса. На бэкэнде (Laravel) я создал сводную таблицу между двумя таблицами Employer_profiles и job_posts. У пользователя может быть один профиль, а в профиле может быть много job_posts.

Я создал таблицу и использую v-for l oop для отображения данных. Как видите, я могу получить доступ к employerprofile из каждого jobPosts, но по какой-то причине ничего не отображается, когда я пытаюсь вытащить данные, подобные этому jobPost.employerprofile.property.

Вот мой таблица с v-for l oop: 

<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(). Есть идеи, что здесь происходит?

enter image description here

1 Ответ

0 голосов
/ 05 мая 2020

Как видно на скриншоте, свойство jobPost.employerprofile является массивом, а не объектом.

И похоже, что в этом массиве всего 1 элемент, поэтому вы можете просто получить первый индекс : 

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

Совет:

Если вы не знаете, почему какое-то свойство не отображается, просто попробуйте отобразить его за пределами l oop где-нибудь на странице, это часто легче понять, что происходит.

Если бы вы сделали что-то вроде следующего, вы бы обнаружили проблему: 

<!-- 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}}
...