javascript - 在 Vue 中加载页面时从列表中调用 json

Question

好吧，我从 vue 开始。我有一个页面，加载时调用 json，返回商店列表，然后单击一个商店列表时会进行另一个调用以查看该商店的信息如何让页面加载时显示第一家店铺的信息？

 <b-card v-for="(user, index) in acciones" :key="index" @click="openNav1(); showInfo(user.id_rule)" v-bind:class="{ 'verde' : user.id_rule === action.id_rule}" tag="article" style="margin:0 auto; max-width: 20rem;" class="mb-2">
                <b-card-text  >
                  <div class="tarjeta">
                    <div class="title-card">
                    <span>{{index + 1}}</span>
                    <h2>{{user.desc_rule}}</h2>    
                    </div>
                    <div class="caja">
                      <b-container class="bv-example-row">
                        <b-row>
                          <b-col>
                            <p class="number potencial-media"><span>&#9679;</span>{{user.sale_potential | currency}}</p>
                            <p class="media">Poten. a la media</p>
                          </b-col>
                        </b-row>
                      </b-container>
                    </div>
                  </div>
                </b-card-text>
              </b-card>

商店列表 json

[
{
"id_store": 2,
"desc_store": "ALBORAYA",
"id_section": 1,
"id_rule": 1,
"desc_rule": "Referencias con mayor potencial",
"sale_potential": "47738.19624456035"
},
{
"id_store": 2,
"desc_store": "ALBORAYA",
"id_section": 1,
"id_rule": 2,
"desc_rule": "Ruptura oculta de stock",
"sale_potential": "946543"
}
]

店铺信息

[
{
"id_store": 2,
"desc_store": "ALBORAYA",
"id_section": 1,
"id_product": 17526761,
"desc_product": "MORTERO SECO M 7-5 GRIS 25 KG",
"desc_range": "A",
"value_vs_avg": "13108.5993934322",
},
{
"id_store": 2,
"desc_store": "ALBORAYA",
"id_section": 1,
"id_product": 19587512,
"desc_product": "BLOQUE HORMIGON 20X20X40 BASTO",
"desc_range": "L",
"value_vs_avg": "6478.5600000384",
},
{
"id_store": 2,
"desc_store": "ALBORAYA",
"id_section": 1,
"id_product": 81948529,
"desc_product": "MORTERO COLA AXTON FLEXIBLE GEL BL 25KG",
"desc_range": "A",
"value_vs_avg": "5513.66343951575",
}
]

Answer 1

您可以在已安装的属性中使用 fetch API:

    let app = new Vue({
        el: '#app',
        mounted: {
            fetch('your json url', ...params)
              .then(res => res.json())
              .then(json => {
                 this.json = json
                })
        },
        data: {
          json: {}
        }
    })