Question

当我加载页面时，我的datacollection为null或未定义，但是我希望网站加载后立即填充来自api的数据。

<script>
  import LineChart from './LineChart.js'
  import axios from 'axios'

  export default {
    name: 'Graph',
    components: {
      LineChart
    },
    data () {
      return {
        ratingOne: null,
        ratingTwo: null,
        ratingThree: null,
        datacollection: null
      }
    },
    created: function () {
      console.log(this.datacollection)
      this.fillData()
    },
    mounted () {
    },
    methods: {
      getZeroes () {
        axios.get('MYAPI').then(response => {
          this.ratingOne = response.data.Rates.filter(rates => 
rates.rate === 0).length
          return this.ratingOne
         })
      },
      fillData () {
        this.getOnes()
        console.log(this.getZeroes())
        this.getOnes()
        this.getTwos()
         this.datacollection = {
          labels: ['Dårlig oplevelse', 'Okay oplevelse', 'Rigtig god 
oplevelse'],
          datasets: [
            {
             backgroundColor: ['#FF0000', '#D3D3D3', '#00CC00'],
              data: [this.ratingOne, this.ratingTwo, this.ratingThree]
            }
            ]
        }
      }
    }
  }
</script>

当我使用单击功能时，它可以工作，并且可以用所需的数据加载图形，但是在我加载页面时却不起作用。谁能告诉我为什么？

当我在控制台上登录“ this.getZeroes（））”时，它只是告诉我“未定义” 当我单击更新按钮

<button @click="fillData()">Randomize</button>

有效

Answer 1

getZeroes，getOnes，getTwos是异步函数。运行getZeroes函数等后，数据尚未准备就绪。这就是为什么dataCollection没有正确的数据的原因。

您需要保证等待响应完成，然后将数据更新到图表。

getZeroes 将返回一个承诺。

getZeroes () {
    return axios.get('MYAPI').then(response => {
      this.ratingOne = response.data.Rates.filter(rates => rates.rate === 0).length
      return this.ratingOne
     })
  },

填充数据中。我们必须使用然后

等待它们完成

fillData () {
    this.getOnes()
        .then(() => this.getZeroes())
        .then(() => this.getTwos())
        .then(() => {
           this.datacollection = {
              labels: ['Dårlig oplevelse', 'Okay oplevelse', 'Rigtig god oplevelse'],
              datasets: [
                 {
                     backgroundColor: ['#FF0000', '#D3D3D3', '#00CC00'],
                     data: [this.ratingOne, this.ratingTwo, this.ratingThree]
                 }
              ]
           }
        })
  }

或者我们甚至可以通过使用Promise.all

并行运行获取并立即获取数据

Promise.all([this.getOnes(), this.getTwos(), this,getThrees()])
    .then(() => { /* the rest here */ })

我的功能加载不正确

1 个答案: