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

var array1 = [1, 2, 3];

console.log(array1.includes(2)); // return true

console.log(array1.includes("2")); // return false

Answer 1

Your %3Flimit%3D200%26filter%3Dpublished%20ge%20%222017-12-15T16%3A50%3A34.034Z%22%20and%20%28action.objectType%20eq%20%22core.user_group_member.user_add%22%20or%20action.objectType%20eq%20%22core.user_group_member.user_remove%22%29 declaration is incorrect, it should be like this:

data

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 data: function () { return { items: null } } 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 fetch

Answer 2

https://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.