CODEWITHSUNDEEP
javascriptjsonvue.jsvuejs2vuetify.js
JesúsDel
JesúsDel

Reputation: 103

Call a json from a list when loading page in Vue

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

Upvotes: 0

Views: 52

Answers (2)

Abhishek
Abhishek

Reputation: 1

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

Upvotes: 0

Dorian B
Dorian B

Reputation: 150

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: {}
        }
    })

Upvotes: 1

Related Questions