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中的初始化值）。< / p>

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

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

Vue.js - this。<value>。<value>未定义

1 个答案: