解决vue中无法取得methods方法中的return值

如果在vue的methods中去return出来一个值, 然后发现调用这个方法的时候, 并不能获取到, 得到的是undefined…解决方法是使用callback回调函数.错误的写法mounted () {const response= this.getReportList()},methods: {async getReportList () {const { data: res } = awa

SUperstarkd

3479人浏览 · 2021-11-22 14:54:21

SUperstarkd · 2021-11-22 14:54:21 发布

如果在vue的methods中去return出来一个值, 然后发现调用这个方法的时候, 并不能获取到, 得到的是undefined…

解决方法是使用callback回调函数.

错误的写法

mounted () {
  const response= this.getReportList()
  },
  methods: {
    async getReportList () {
      const { data: res } = await this.$http.get('reports/type/1')
      if (res.meta.status !== 200) return this.$message.error('获取折线图数据失败')
      return res.data
    }
  }

正确的写法

mounted () {
  this.getReportList(data => console.log(data))
  },
  methods: {
    async getReportList (callback) {
      const { data: res } = await this.$http.get('reports/type/1')
      if (res.meta.status !== 200) return this.$message.error('获取折线图数据失败')
      callback(res.data)
    }
  }