0

I'm trying to display JSON data on my webpage by using the v-for function in Vue.js and Axios to get the data. Below is my code and an example of the JSON data i'm trying to use.

I have kept the JSON data URL out on purpose as it's private, which is why i've provided an example of the data structure.

I can print the entire data set to my page, as it appears below but if i use my code below to print specific parts of data, like the id or name, that's when i get nothing on the page.

<div id="root">
        <p v-for="item in items">{{ item.name }}</p>
    </div>

    <script>

        var app = new Vue({
          el: '#root',

          data: {
            items: []
          },

          mounted() {
            axios.get("...")
            .then(response => {this.items = response.data.data})
          }

        });         

    </script>

JSON data example:

json { "current_page": 1, "data": [ { "id": "83", "name": "Name1", }, { "id": "78", "name": "Name2", }, { "id": "720", "name": "Name3", }, { "id": "707", "name": "Name4", }, { "id": "708", "name": "Name5", } ], "from": 1, "prev_page_url": null, "to": 20, "total": 42 }

user2953989
  • 2,791
  • 10
  • 36
  • 49

1 Answers1

0

looking at the code everything looks ok, but i have an example in the application i am working on and i've noticed that your items array should contain response.data.data.data wich is verbose but you can work on that later

Cristian Garcilazo
  • 41
  • 3