Question

我需要显示从服务器获取的json数据数组：

使用v-for指令，我应该能够为每个数据创建一个Card。

我正在使用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调用代码，则提出建议会更容易。

在Vuejs模板中动态呈现json数组的正确方法是什么？

1 个答案: