When i render my ponent 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 ponent with an a tag rendering the function.

Can anyone tell me how i render my ponent 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">{{pany.storeScore}} test</p>
          <p class="text">Tilfredhedscore</p>
  </div>

getStoreScore (condition) {
      return axios.post('API-LINK', {
        storeId: '5b7515ed5d53fa0020557447',
        condition: condition
      }).then(response => {
        thispany.storeScore = response.data.result
        thispany.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,
      pany: {},
      isActive: false,
      test12345: {}
    }
  },

Thanks in advance

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

data() {
  return{
    pany: 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{
    pany: {
      amount: {
       total: null
      }
    }
  }
}

When i render my ponent 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 ponent with an a tag rendering the function.

Can anyone tell me how i render my ponent 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">{{pany.storeScore}} test</p>
          <p class="text">Tilfredhedscore</p>
  </div>

getStoreScore (condition) {
      return axios.post('API-LINK', {
        storeId: '5b7515ed5d53fa0020557447',
        condition: condition
      }).then(response => {
        this.pany.storeScore = response.data.result
        this.pany.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,
      pany: {},
      isActive: false,
      test12345: {}
    }
  },

Thanks in advance

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

data() {
  return{
    pany: 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{
    pany: {
      amount: {
       total: null
      }
    }
  }
}

• javascript
• api
• vue.js
• vue-ponent

• vuejs/v2/guide/… you have to define a data object and set the values you load with ajax to make them reactive. in your case its only "pany": – peter46 Commented Sep 3, 2018 at 11:30
• i have defined it in data :) data () { return { selected: 1, pany: {}, isActive: false, test12345: {} } }, – Anders Bootsmann Larsen Commented Sep 3, 2018 at 11:33
• you only reference to total in the ajax call, so i guess response.data.amount is the problem – peter46 Commented Sep 3, 2018 at 11:44
• yes here hastebin./urakowufoq.xml – Anders Bootsmann Larsen Commented Sep 3, 2018 at 11:49
• 1 ok, so the way vue works, it renders the whole template first, before doing any lifecycle event so whenever you write something like this <p v-if="pany.amount" class="number">{{pany.amount.total}}</p> it is trying to access "pany.amount.total" because "pany.amount" is defined as an empty object in data.... so change that to pany: {total: null} – peter46 Commented Sep 3, 2018 at 12:05

1 Answer 1

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

data() {
  return{
    pany: 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.pany.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">{{pany.storeScore}} test</p>
          <p class="text">Tilfredhedscore</p>
  </div>