Question

尝试添加数据时推送到数组会导致 Vuejs 中出现错误

2016-11-27

1514

javascript vue.js

我正在研究一个无限滚动解决方案，并尝试将数据推送到对象数组上，但出现错误：

vue.common.js?e881:2643 [Vue warn]: Error when rendering anonymous component at /Users/Deric/Sites/mobile/lawn-mobile/src/components/jobs/index.vue: warn @ vue.common.js?e881:2643Vue._render @ vue.common.js?e881:2253(anonymous function) @ vue.common.js?e881:1699get @ vue.common.js?e881:736run @ vue.common.js?e881:805flushSchedulerQueue @ vue.common.js?e881:623nextTickHandler @ vue.common.js?e881:401
vue.common.js?e881:2262 TypeError: Cannot read property 'length' of undefined(…)

如果我只是设置数据，它可以工作，但无限滚动会覆盖数据而不是附加到数据。这是我的数据对象：

data () {
  return {
    jobs: [],

这是我的 http 调用：

getJobs(pageNumber = 1) {
  let api = SessionStorage.get.item('api')
  let url = `${api.base_url}jobs?page=${pageNumber}`
  this.$http.get(url).then((response) => {
    console.log(response.body.data)
    this.jobs.push(response.body.data)

console.log 如下所示：

让它工作的诀窍是什么？我也尝试过 concat ，但是也不起作用。

Answer 1

您是否正确使用了 concat，即

this.jobs = this.jobs.concat(response.body.data)

仅当您的 console.log 输出正确时，这才会为您提供一个对象数组，这似乎是您想要的。

Answer 2

看起来 this 没有指向正确的对象，请尝试以下操作-

getJobs(pageNumber = 1) {
  let api = SessionStorage.get.item('api')
  let url = `${api.base_url}jobs?page=${pageNumber}`
  let self = this 
  this.$http.get(url).then((response) => {
    console.log(self.jobs)
    console.log(response.body.data)
    self.jobs.push(response.body.data)