Vue-Resource: как получить и показать несколько массивов из JSON - PullRequest
Новая
       29

Vue-Resource: как получить и показать несколько массивов из JSON

0 голосов
/ 25 октября 2018

У меня есть JSON из моего API: 

{"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()
    }

1 Ответ

0 голосов
/ 26 октября 2018

По совету Джайема я использовал 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>
...