Vue-Resource:如何从JSON获取和显示多个数组

Question

我的API中有一个JSON：

{"users":
[
    {"id":1,"name":"Adam"},
    {"id":2,"name":"Barry"}
],
"announcements":
[
    {"id":1,"content":"blah blah"},
    {"id":2,"content":"ya ya"}
]
}

如何让vue-resource获取这些数组，并将它们分别放入users和announcements中，以便它们可以在视图中循环？

我的脚本：

  export default {
    name: 'home',
    data: {
      users: [],
      announcements: []
    },
    methods: {
      fetchData () {
        this.$http.get('http://localhost:3000')
          .then(function (response) {
          // what do I put here to assign the response to users and announcements?
          })
      },
    },

    created: function () {
      this.fetchData()
    }

Answer 1

根据Jayem的建议，我使用了Axios：

安装然后参考axios

import axios from 'axios'

Vue.prototype.$http = axios

使用Axios

<script>
export default {
  data () {
    return { info: null, announcements: null, users: null }
  },
  mounted () {
    this.$http
      .get('http://localhost:3000/')
      .then(response => {
        (this.info = response.data)
        console.log(response.data.announcements)
        console.log(response.data.users)
      })
  }
}
</script>

在视图中添加：

<div v-for="announcement in info.announcements">
 {{ announcement.content }}
</div>
<div v-for="user in info.users">
 {{ user.name }}
</div>