javascript - 获取数据之前的 Vue 渲染组件

Question

当我使用数据属性渲染组件时，它会在获取数据之前加载 html。这导致没有数据被显示。直到我使用渲染函数的标签在组件内进行 api 调用。

谁能告诉我在获取数据后如何渲染我的组件。我已经尝试过 v-if 条件。它呈现我的页面没有数据。如果我删除 v-if 它说无法读取未定义的属性。

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

提前致谢

更新(已解决): 公司定义之前是空的，像这样

data() {
  return{
    company: null
  }
}

这导致渲染数据时出现问题。 解决方法是定义我想要使用的数组中的内容

例如

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

Answer 1

您自己找到了解决方案，这真是太好了。好吧，我提出另一个解决方案。 您可以使用 bool 值来完成此操作。 方法如下:

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

并在获取数据后更新此 bool 值。

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

然后在获取数据之前使用此 bool 值停止渲染。

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