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

Question

嗯，我是从头开始的。我有一个页面，该页面在加载时会调用json，该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

您必须使用“挂载”方法调用列表

Answer 2

您可以在mounted属性中使用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: {}
        }
    })

Answer 3

创建后，您可以进行api调用，并且在该api调用成功后，您可以设置第一项的商店信息。创建（）钩子让我知道是否有效谢谢：）