Vue.js - 这个。<value>.<value> 未定义

Question

<div class="content-chart">
 <chart :type="'line'" :data="lineData" :options="options"></chart>
</div>

上面是组件的模板部分，下面是脚本。

<script>
import Chart from 'vue-bulma-chartjs'
import { Tabs, TabPane } from 'vue-bulma-tabs'
export default {
  components: {
    Chart
  },
  data () {
    return {
      persondata: {},
    }
  },
  mounted () {
    let parameter = this.$route.params.id
    axios.get('/api' + parameter.toString()).then(response => {
     this.persondata = response.data
    })
  },
  computed: {
    lineData () {
      var sth = this.person.dates['date-values']
      return {
        labels: [9, 10, 11, 12, 13, 14, 15],
        datasets: [{
          data: sth,
          label: 'Speed',
        }]
      }
   }
}
</script>

所以正如你所看到的，这个 Vue 组件在页面上渲染了来自 Chart .js 的图表。问题是当我从 api 获得响应并将其保存到 this.persondata 变量时，当组件挂载时，我得到"TypeError: this.persondata.dates is undefined".如果我这样做：

data () {
  return {
    persondata: {
      dates: {
        'date-values': []        
      }
    }
  }
}

我尝试将response.data.dates['date-values']保存到this.persondata.dates['date-values']并将其插入dataset.data中，computed()我没有得到任何图表。

问题出在哪里？

Answer 1

计算属性是立即计算的：它们是在Ajax返回之前计算的。

由于您仅在 Ajax 返回时填充persondata，因此第一次计算计算时，persondata {}(data 中的初始化值(。

快速修复：使用空dates对象进行初始化，这样计算就不会抛出该错误(为 Ajax 返回提供时间，这将自动更新计算属性(：

  data () {
    return {
      persondata: {dates: {}}, // added empty dates property
    }
  },