Question

我正在进行API调用，每次页面加载时都会出现此错误，我也不知道为什么。谁能告诉我为什么？我试过了：

以下是我使用总额的标记：

<div class="summary__graph">
        <div class="graph__header">
          <h3 class="headline">Fordeling</h3>
          <p class="answers">{{company.amount.total}} besvarelser</p>
        </div>

在这里定义我的公司，以总价值填充

 data () {
    return {
      selected: 1,
      datacollection: null,
      datacollection2: null,
      datacollection3: null,
      company: '',
      isActive: false,
      scoreLine: null,
      timeBar: null,
      answerPercent: null

    }
  },

已安装vue.js和方法

  mounted () {
    this.getStoreScore()
    this.fillData()
    this.fillData2()
    this.fillData3()
    this.fillDataScoreLine()
    this.fillDataTimeBar()
    this.fillDataAnswerPercent()
  },


getStoreScore () {
      return axios.post('API', {
        storeId: '5b7515ed5d53fa0020557447'
      }).then(response => {
        this.company = {
          'storeScore': response.data.result,
          'amount': {
            'total': response.data.amount.total,
            'zero': {
              'amount': response.data.amount.zero,
              'percentage': response.data.amount.zero / response.data.amount.total * 100
            },
            'one': {
              'amount': response.data.amount.one,
              'percentage': response.data.amount.one / response.data.amount.total * 100
            },
            'two': {
              'amount': response.data.amount.two,
              'percentage': response.data.amount.two / response.data.amount.total * 100
            },
            'three': {
              'amount': response.data.amount.three,
              'percentage': response.data.amount.three / response.data.amount.total * 100
            }
          }
        }
        return this.company
      })
    },

谁能告诉我为什么它会给我这个错误？：D

Answer 1

由于要进行API调用，因此在接收任何数据之前会先渲染页面。之所以会收到错误，是因为呈现页面时company.amount是未定义的。可能有一些解决方法：要么延迟页面渲染，直到接收到所有数据，要么在

周围写一个if条件

<p class="answers">{{company.amount.total}} besvarelser</p>

更多信息：https://vuejs.org/v2/guide/conditional.html

编辑：您的代码将变为

<p v-if="company.amount" class="answers">{{company.amount.total}} besvarelser</p>

Javascript：加载页面时出错

1 个答案: