VueJS Data is Not Displaying in template from method return

Question

/* eslint-disable eol-last */
<template>

<div id="app">
    <ul>
      <li v-for="item in items">  /*  this list is not displaying */
        {{ item.id }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'app',
  data: {
    items: []
  },
  created () {
    this.fetchData()
  },
  methods: {
    fetchData () {
      this.$http.get('http://url/api/users')
        .then(result => {
          this.items = result.data
        })
    }
  }
}
</script>

this list is not displaying i am unable to print this in template. Json returns data but could not access in template.please guide me. Where i am making mistake.

Adding a debugger; before this.items = result.data and inspecting result.data. Its an array as expected? — tiagojpdias
– tiagojpdias, Commented Apr 19, 2017 at 9:12

Micaso · Accepted Answer · 2017-05-20 17:38:06Z

2

The Problem might be that in your Ajax callback you try to assign to THIS.items but THIS has wrong scope. Create a variable before the ajax call E.g let self = this; And in the ajax cb: self.items = response.data;

answered May 20, 2017 at 17:38

Micaso

565 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

VueJS Data is Not Displaying in template from method return

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related