Question

我有一个resource.js，它是导出的ES6类：

import Vue from 'vue'
import VueResource from 'vue-resource'

Vue.use(VueResource)

export class Resource {

  getMovies () {
      // GET /someUrl
    return Vue.http.get('http://localhost:3335/cardname').then((response) => {
      console.log('success')
      return response
    }, (response) => {
      console.log('problem')
      return response
    })
  }

}

然后我在我的组件中导入它并在视图/组件中传递数据：

<script>
  import { movies } from '../mock'
  import { Resource } from '../services/resource'
  const resourceService = new Resource()
  export default {
    name: 'hello',
    data () {
      return {
        msg: 'MovieRama',
        count: 0,
        movies: movies.movies,
        totalMovies: movies.total,
        test: null
      }
    },
    mounted: function () {
// Note this part
      let that = this
      resourceService.getMovies().then(function (result) {
        that.test = result
      })
    },
    methods: {
      boom: function () {
        console.log('Woho')
      },
      updateCount: function () {
        this.count++
      }
    }
  }
</script>

请注意mounted方法。为什么我需要保留这样的范围才能在data（）{}？

中传递数据

我正在查看vue.js文档，这似乎没有必要：

http://vuejs.org/guide/instance.html#Instance-Lifecycle-Hooks

Answer 1

由于您使用了匿名函数，因此在调用this时它具有自己的范围。如果你使用箭头功能，你可以摆脱

resourceService.getMovies().then((result) => {
  this.test = result
})

我还建议查看用于创建资源的文档：https://github.com/vuejs/vue-resource/blob/master/docs/resource.md

这是一种创建自动包含get，update，delete等方法的类的方法。

如何将数据从vue-resource方法传递到vue组件中的视图层？

1 个答案: