时间戳

首页 > 解决方案 > 获取数据之前的 Vue 渲染组件

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

问题描述

当我使用我的数据属性渲染我的组件时，它会在获取数据之前加载 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
      }
    }
  }
}

标签： javascriptapivue.jsvue-component

解决方案

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

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>

推荐阅读