Как правильно визуализировать массив json динамически в шаблоне Vuejs?

Question

Мне нужно отобразить массив данных JSON, которые я получил с сервера:

Используя директиву v-for, я смогу создать Карту для каждой информации.

Я использую Vuex для получения и передачи данных JSON. Я использую computed для получения данных в компоненте Vue, на этом уровне все отлично работает.

<template>
    <b-row>
        <b-col v-for="company in processCompanies" :key="company.id" cols="2">
            <div>
                <b-card :title="company.companyAcronym" :sub-title="company.companyAcronym">
                    <b-card-text>{{company.dateRegistered}}</b-card-text>
                    <b-link href="#" :id="company._id" class="card-link" @click="$emit('changeComponent','CompanyDetails')">Manage</b-link>
                </b-card>
            </div>
        </b-col>  
    </b-row>  
</template>

computed: {
    ...mapGetters({companies: 'company/getCompanies'}),
    processCompanies: function(){
        return this.companies;
    }
}

Вместо того чтобы динамически создавать одну карту из данных JSON, я создал 117 карт.

Есть ли проблема с моей директивой v-for, или как правильно выполнить рендеринг с данными json выше?

[{"_id":"Pg76sjvQ5XWxD8OZ20qyfOOhqP23","companyAcronym":"JABIQ","dateRegistered":"2019-05-13T01:35:45.292Z","__v":0}]

Answer 1

Исходя из того, что вы получаете 117 карт вместо одной, а в вашем ответе ровно 117 символов, кажется очевидным, что вы воспринимаете ответ как String вместо объекта.

Вы можете исправить это, добавив JSON.parse(response) где-то по пути, прежде чем пытаться отобразить его.

если вы используете axios и получаете этот ответ, скорее всего, это связано с тем, что сервер установил неверную информацию о кодировке.

если вы используете fetch, ответ не преобразуется автоматически, но его легко проанализировать, добавив then(r => JSON.parse(r))

Если вы опубликуете свой код вызова ajax, сделать предложение будет проще.