How can I run functions within a Vue data object?

Question

So I am trying to use the following component within Vue JS:

Vue.component('careers', {
  template: '<div>A custom component!</div>',

  data: function() {

    var careerData = [];

    client.getEntries()
    .then(function (entries) {
      // log the title for all the entries that have it
      entries.items.forEach(function (entry) {
        if(entry.fields.jobTitle) {
          careerData.push(entry);
        }
      })
    });

    return careerData;
  }
});

The following code emits an error like so:

[Vue warn]: data functions should return an object:
https://v2.vuejs.org/v2/guide/components.html#data-Must-Be-a-Function 
(found in component <careers>)

However as you can see I am running a foreach through all of my Contentful entries, then each object within entries is being pushed to an array, I then try to return the array but I get an error.

Any idea how I can extract all of my entries to my data object within my component?

When I use the client.getEntries() function outside of my Vue component I get the following data:

error says that the data function must return an Object, not an Array? — hackerrdave
– hackerrdave, Commented Jan 20, 2017 at 12:34

Belmin Bedak · Accepted Answer · 2020-09-07 11:17:47Z

32

First thing first - keep your data model as clean as possible - so no methods there.

Second thing, as error says, when you are dealing with data into component, data should be function that returns an object:

Vue.component('careers', {
  template: '<div>A custom component!</div>',

  data: function() {
    return {
     careerData: []
    }
  }
});

As I write, data fetching and other logic shouldn't be in the data, there is an object reserved for that in Vue.js called methods.

So move your logic into the methods, and when you have received the data, you can assign it to careerData like this:

this.careerData = newData

or push things to the array like you did before. And then at the end, you can call the method on some lifecycle hooks:

Vue.component('careers', {
  template: '<div>A custom component!</div>',

  data: function() {
    return {
      careerData: []
    }
  },

  created: function() {
    this.fetchData();
  },

  methods: {
    fetchData: function() {
      // your fetch logic here
    }
  }
});

edited Sep 7, 2020 at 11:17

answered Jan 20, 2017 at 12:36

Belmin Bedak

9,2213 gold badges43 silver badges44 bronze badges

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

1 Comment

Nick Maddren Over a year ago

Ahhh this makes so much more sense to me now. Thanks for spreading the knowledge!

Catch · Accepted Answer · 2021-04-22 09:29:36Z

0

Sometimes you are forced to have functions inside data object, for example when posting data and functions to some framework components (e.g. element-ui shortcuts in datepicker). Because data in vue is actually a function, you can declare functions inside it before the return statement:

export default {
data() {
  let onClick = (picker) => {
    picker.$emit('pick', new Date());
    this.myMethod();
  }

  return {
    pickerOptions: {
      shortcuts: [{
        text: 'Today',
        onClick: onClick
      }]}
  };
},
methods:{
  myMethod(){
    console.log("foo")
  }
},
};

You can point with this to the methods if you wish. It is not particularly clean as possible but it may come handy sometimes.

answered Apr 22, 2021 at 9:29

Catch

3706 silver badges13 bronze badges

Collectives™ on Stack Overflow

How can I run functions within a Vue data object?

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related