Data Fetch in Vue.js Single File Component

Question

my data fetch works fine when is used globally but once I stick in the single file component is not returning the items. What I'm doing wrong?

ladeditems.vue

<template>
<div>
  <ul v-for="item in items">
    <li>
      {{item.title}}
    </li>
  </ul>
</div>
</template>

<script>
export default {
  components: {'tiny-slider': VueTinySlider},
  name: 'ladeditems',
  data: {
    items: null
  },
  methods: {
    fetchData: function () {
      let self = this
      const myRequest = new Request('https://jsonplaceholder.typicode.com/posts')

      fetch(myRequest)
        .then((response) => { return response.json() })
        .then((data) => {
          self.items = data
          // console.log(self.items)
        }).catch( error => { console.log(error); });
    }
  },

  mounted() {
    this.fetchData()
  }
}
</script>

Where is the error? Try adding a catch to your fetch call

Thomas
– Thomas

2017-12-18 08:20:24 +00:00
Commented Dec 18, 2017 at 8:20 — Thomas
– Thomas, Commented Dec 18, 2017 at 8:20

tony19 · Accepted Answer · 2022-07-15 20:53:09Z

6

Your data declaration is incorrect, it should be like this:

data: function () {
  return {
    items: null
  }
}

This info is here: data. In short it has to be a function that returns an object. This should allow the property to be reactive to your changes.

Also worth noting that fetch isn't declared in the code you've provided so I assume it's a global declaration. If it isn't and it's a mixin then you'll need to scope it with this.fetch(...)

edited Jul 15, 2022 at 20:53

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Dec 18, 2017 at 8:29

webnoob

16k13 gold badges87 silver badges169 bronze badges

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

Comments

tony19 · Accepted Answer · 2022-07-15 04:59:04Z

3

https://v2.vuejs.org/v2/api/#data

When defining a component, data must be declared as a function that returns the initial data object, because there will be many instances created using the same definition. If we use a plain object for data, that same object will be shared by reference across all instances created! By providing a data function, every time a new instance is created we can call it to return a fresh copy of the initial data.

edited Jul 15, 2022 at 4:59

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Dec 18, 2017 at 8:27

Stephan-v

20.5k32 gold badges125 silver badges213 bronze badges

Collectives™ on Stack Overflow

Data Fetch in Vue.js Single File Component

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related