vue.js在对象数组中呈现一个列表

问题描述

我有一个Vue.js实例,该实例发出一个GET请求,我想使用v-for显示所有数据,但我可以在jsonBody申请书中访问我想要的字段。

我的vue.js实例:

vanilla wordpress installation

我的HTML:

var pedidosTable = new Vue({
    el: '#pedidosTable',data: function(){
        return{
            listofDi: [],listofStep1: []    
        }
    },created: function(){   
        const req = fetch("http://localhost:4242/api/v1/dis").then(response =>{
            return response.json();
       }).then(jsonBody =>{
                this.listofDi = jsonBody;
           });  
    },methods:{
      
    },});

获取请求中的我的json:

 <tr v-for="item of listofDi">
     <td>{{ item.DI.Step1[0].nomeDoCliente }}</td>
 </tr>

如何在v-for列表的[ { "_id":"5f4608e4516d5c137e9d40e7","DI":{ "Step1":[ { "codigoCliente":"56777","operacao":"PRÓPRIA","tipodeOperacao":"TradING","lucro":"REAL","beneficioIpi":"NÃO","consumidor":"P. JURÍDICA","rateio":"PESO","nomeDoCliente":"Submarino","dolarDi":4.4359,"dolarCambio":4.5 } ],"Step2":[ { "id":{ "oid":"5f232394ac7e930548107d16" },"produto":"cadeira de rodas","ncm":"467.987","descricao":"cadeira de rodas teste","cliente_id":{ "oid":"5f21e23eac7e9305490f9424" },"aliqII":0.2,"aliqIpi":0,"aliqPis":0.21,"aliqCofins":0.0965,"pesoUnitario":0.43,"unitario":0.88,"dumping":0,"cubagemunitario":0,"quantidade":33,"icmestadoDestino":0,"mvaAjustado":0,"markup":0.12,"selected":true,"url":"http://localhost:3000/produtos/5f232394ac7e930548107d16.json" },{ "id":{ "oid":"5f232c61ac7e930a6f8ea06a" },"produto":"Bicicleta","ncm":"456.879","descricao":"Bicicleta caloi","unitario":0.78,"quantidade":44,"url":"http://localhost:3000/produtos/5f232c61ac7e930a6f8ea06a.json" } ],"Step3":[ { "freteInternacional":1790.36,"capatazia":384.35,"siscomex":260.1,"marinhaMercante":2076.97,"outrasDespesasAduaneiras":1000 } ],"Step4":[ { "armazenagemZonaPrimaria":2986,"diferencaFreteInternacional":158.09,"despachante":1835.68,"liStep4":53.53,"taxasBl":844.05,"tarifaCambial":250,"multa":0,"taxaExpediente":250,"freteAoCliente":1194,"debitoIcms":0.04,"pagEfetivo":0.04,"pagDesembaraco":0.01,"descontoComercial":0.01,"debitoPIS":0.0165,"debitoCofins":0.076,"IR":0.25,"Csll":0.09 } ] } },{ "_id":"5f460d55f46a2b160079f9a8","DI":{ "Step1":[ { "codigoCliente":"98978","nomeDoCliente":"Black & Decker","Step2":[ { "id":{ "oid":"5f077925ac7e9319ff7d1c6b" },"produto":"cafeteira","ncm":"9878.7389","descricao":"cafeteira capsula","cliente_id":{ "oid":"5f0775e8ac7e9319ff7d1c68" },"quantidade":12,"url":"http://localhost:3000/produtos/5f077925ac7e9319ff7d1c6b.json" } ],"Csll":0.09 } ],} } ] 数组内访问nomeDoCliente字段并显示字段?

解决方法

暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!

如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@)