Vue 不会读取 JSON 响应？答案

【问题标题】：Vue won't read JSON response?Vue 不会读取 JSON 响应？
【发布时间】：2018-06-21 09:56:34
【问题描述】：

如果/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.

【问题讨论】：

您不只是将jobs 的值设置为回调中的对象吗？

标签： json node.js vue.js vuejs2 vue-component

【解决方案1】：

你正在用一个对象覆盖数组：

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

【讨论】：

【解决方案2】：

你得到的是一个对象，而不是一个数组，所以jobs.length 是undefined。

【讨论】：