CODEWITHSUNDEEP
javascriptapivue.jsvue-component
Anders Bootsmann Larsen
Anders Bootsmann Larsen

Reputation: 341

Vue render component before data fetched

When i render my component with my data properties it loads html before data are fetched. This results in no data is shown. Until I make an api call inside the component with an a tag rendering the function.

Can anyone tell me how i render my component after data is fetched. I have tried the v-if condition. it renders my page with no data. If i remove the v-if it says can't read property of undefined. 

  <div class="score">
          <p class="number">{{company.storeScore}} test</p>
          <p class="text">Tilfredhedscore</p>
  </div>

getStoreScore (condition) {
      return axios.post('API-LINK', {
        storeId: '5b7515ed5d53fa0020557447',
        condition: condition
      }).then(response => {
        this.company.storeScore = response.data.result
        this.company.amount = {
          'total': response.data.amount.total,
          'zero': {
            'amount': response.data.amount.zero,
            'percentage': (response.data.amount.zero !== 0 ? response.data.amount.zero / response.data.amount.total * 100 : 0)
          },
          'one': {
            'amount': response.data.amount.one,
            'percentage': (response.data.amount.one !== 0 ? response.data.amount.one / response.data.amount.total * 100 : 0)
          },
          'two': {
            'amount': response.data.amount.two,
            'percentage': (response.data.amount.two !== 0 ? response.data.amount.two / response.data.amount.total * 100 : 0)
          },
          'three': {
            'amount': response.data.amount.three,
            'percentage': (response.data.amount.three !== 0 ? response.data.amount.three / response.data.amount.total * 100 : 0)
          }

        }
      })
    }


data () {
    return {
      selected: 1,
      company: {},
      isActive: false,
      test12345: {}
    }
  },

error message

Thanks in advance

UPDATE (solved): the company definition were null before like this

data() {
  return{
    company: null
  }
}

this caused problems with rendering out my data. the fix is to define the things in my array i want to use

e.g 

data() {
  return{
    company: {
      amount: {
       total: null
      }
    }
  }
}

Upvotes: 2

Views: 9487

Answers (1)

Aaqib Khan
Aaqib Khan

Reputation: 324

That is great that you found solution yourself. Well i am proposing another solution. You can use a Boolean to accomplish this. Here is how:

data() {
  return{
    company: null,
    is_data_fetched: false
  }
}

And update this Boolean after data is fetched.

getStoreScore (condition) {
    return axios.post('API-LINK', {
        storeId: '5b7515ed5d53fa0020557447',
        condition: condition
    }).then(response => {
        this.company.storeScore = response.data.result;
        this.is_data_fetched = true;
    });
}

And then use this Boolean to stop rendering before data is fetched.

  <div class="score" v-if="is_data_fetched">
          <p class="number">{{company.storeScore}} test</p>
          <p class="text">Tilfredhedscore</p>
  </div>

Upvotes: 5

Related Questions