Call a json from a list when loading page in Vue

Question

well, I'm starting in vue. I have a page that when loaded calls a json, which returns a list of stores, and in turn that list of stores when clicking on one makes another call to see the information of that store How can I make the page show the information of the first store when loading the page?

 <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>

store list 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"
}
]

store information

[
{
"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",
}
]

You need to show your data structure.

Eggon
– Eggon

2020-04-05 17:54:09 +00:00
Commented Apr 5, 2020 at 17:54 — Eggon
– Eggon, Commented Apr 5, 2020 at 17:54

Dorian B · Accepted Answer · 2020-04-05 19:15:36Z

1

You can use the fetch API in the mounted property :

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

answered Apr 5, 2020 at 19:15

Dorian B

3002 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Abhishek · Accepted Answer · 2020-04-05 20:43:38Z

0

On created you can make an api call and on success of that api call you can set store information of the first item. created () hook Let me know if it works Thanks :)

answered Apr 5, 2020 at 20:43

Abhishek

12 bronze badges

Collectives™ on Stack Overflow

Call a json from a list when loading page in Vue

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related