Question

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

以下是来自网址的回复：

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

我刚收到这个回复：

Nothing waiting.

Answer 1

你用一个对象覆盖数组：

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

Answer 2

您获取的是对象，而非数组，因此jobs.length为undefined。

Vue不会阅读JSON回复？

2 个答案: