0

我正在构建一个小vue.js应用程序，我在其中执行一些发布请求。我使用watch-method 来进行 api 更改，如果发布请求成功，则更新组件。由于观察者不断检查 API，我想添加该._debounce方法，但由于某种原因它不起作用。

这是代码：

<script>
import _ from 'lodash'
export default { 
    data () {
      return {
        cds: [],
        cdCount: ''
     }
   },
   watch: {
     cds() {
       this.fetchAll()
     }
   },
   methods: {
      fetchAll: _.debounce(() => {
        this.$http.get('/api/cds')
         .then(response => {

          this.cds = response.body
          this.cdCount = response.body.length
         })
     })
  },
  created() {
     this.fetchAll();
  }
}
</script>

这给了我错误：Cannot read property 'get' of undefined

有人可以告诉我我做错了什么吗？

编辑

我删除了watch-method 并尝试添加

updated(): {
  this.fetchAll()
}

结果请求在循环中运行：-/当我删除updated-lifecycle时，组件（当然）不会对api / array更改做出反应......我很无能为力

4

1 回答 1

4

注意this: () => {in 方法是this引用window而不是 Vue 实例。

使用常规声明function：

   methods: {
      fetchAll: _.debounce(function () {
        this.$http.get('/api/cds/add').then(response => {
          this.cds = response.body
          this.cdCount = response.body.length
         })
     })
   },

其他问题

你有一个循环依赖。

该fetchAll方法正在改变cds属性（ line this.cds = response.body）并且cds()手表正在调用this.fetchAll()。如您所见，这会导致无限循环。

解决方案：fetchAll通过从观察者中删除调用来停止循环：

  watch: {
    cds() {
     // this.fetchAll() // remove this
    }
  },
于 2018-03-06T23:08:23.627 回答