获取数据之前的 Vue 渲染组件答案

【问题标题】：Vue render component before data fetched获取数据之前的 Vue 渲染组件
【发布时间】：2019-02-08 10:57:57
【问题描述】：

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

【问题讨论】：

vuejs.org/v2/guide/… 您必须定义一个数据对象并设置您使用 ajax 加载的值以使其具有反应性。在您的情况下，它是唯一的“公司”：
我已经在 data 中定义了 :) data () { return { selected: 1, company: {}, isActive: false, test12345: {} } },
你只在ajax调用中引用total，所以我猜response.data.amount是问题
是这里hastebin.com/urakowufoq.xml
好的，vue 的工作方式是先渲染整个模板，然后再执行任何生命周期事件，所以每当你写这样的东西时
{{company.amount.total}}
它正在尝试访问“company.amount.total”，因为“company.amount”被定义为数据中的空对象......所以将其更改为公司: {total: null}

标签： javascript api vue.js vue-component

【解决方案1】：

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

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>

【讨论】：