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

Posted 2023-02-16

【中文标题】在Vue中加载页面时从列表中调用json

【英文标题】：Call a json from a list when loading page in Vue

【发布时间】：2020-07-17 16:14:36

【问题描述】：

好吧，我从 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",

]

【问题讨论】：

你需要展示你的数据结构。

【参考方案1】：

你可以在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: 
        
    )

【参考方案2】：

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