如果 /scheduled_jobs/list 返回一个 JSON 对象，为什么我的 Vue 组件无法读取它？

这是组件:

<template> 
    <div> 
        <ul v-if="jobs.length"> 
            <li v-for="job in jobs"> 
        {{ job.id }} 
        {{ job.document_id }} 
        {{ job.user_id }} 
        {{ job.schedule }} 
        {{ job.status }} 
      </li> 
        </ul> 
        <p v-else> 
            Nothing waiting. 
        </p> 
    </div> 
</template> 
 
<script> 
  export default { 
    data () { 
      return { 
        jobs: [] 
      } 
    }, 
    methods: { 
      loadData () { 
        $.get('/scheduled_jobs/list', function (response) { 
          this.jobs = response.json() 
        }.bind(this)) 
      }, 
      ready () { 
        this.loadData() 
 
        setInterval(function () { 
          this.loadData() 
        }.bind(this), 30000) 
      } 
    } 
  } 
</script> 

这是来自 URL 的响应:

{ 
  "id": "8154e79383a950072823410e", 
  "document_id": 59455, 
  "user_id": 2, 
  "schedule": "2018-02-03T12:00", 
  "status": 2 
} 

我刚刚收到此回复:

Nothing waiting. 

请您参考如下方法:

您正在用一个对象覆盖数组:

methods: { 
      loadData () { 
        $.get('/scheduled_jobs/list', function (response) { 
          this.jobs.push(response.json()); 
        }.bind(this)) 
      }