Компонент рендеринга перед извлечением данных - PullRequest
Новая
       9

Компонент рендеринга перед извлечением данных

0 голосов
/ 03 сентября 2018

Когда я рендерил свой компонент со своими свойствами данных, он загружает HTML, прежде чем данные будут извлечены. Это приводит к тому, что данные не отображаются. Пока я не сделаю вызов API внутри компонента с тегом, отображающим функцию.

Может кто-нибудь сказать мне, как я отрисовываю свой компонент после выборки данных. Я пробовал V-If условие. он отображает мою страницу без данных. Если я удаляю v-if, он говорит, что не может прочитать свойство 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

Заранее спасибо

ОБНОВЛЕНИЕ (решено): определение компании раньше было пустым 

data() {
  return{
    company: null
  }
}

это вызвало проблемы с рендерингом моих данных. исправление - определить вещи в моем массиве, которые я хочу использовать

например, 

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

1 Ответ

0 голосов
/ 03 сентября 2018

Здорово, что ты сам нашел решение. Ну, я предлагаю другое решение. Вы можете использовать логическое значение для достижения этой цели. Вот как: 

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

И обновите это логическое значение после получения данных. 

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

А затем используйте это логическое значение, чтобы остановить рендеринг до извлечения данных. 

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