Vue Data function - Multiple ways to declare

Each component has the data function methods as part of the declaration.

data is a function in Vue that returns an object.

Why does data have to declare in a component?

Each component has some data to show in the browser, so the data function code returns the data. this will be accessed by Component methods globally.

Does the data function hold API logic to retrieve from the Database? No, data fetching logic should be handled in the method section of the component.

When will the data function be called? data function is called by Vue while creating a component instance and returns an object, These data include in Vuejs reactive and store the instance data as $data object.

Important points about data function

• It can be arrow functions or data property or normal es5 function
• It should always return an object
• Object properties are available, can be accessed using component instance
• Methods can be called inside data function
• returned object contains properties, keys as well as function calls

Vue.component('About', {
  template: '<div>About Component</div>',

  data: function() {
    return {
     faq:"Vuej component faqs"    }
  }
});

Following are different ways to declare data function in Vue components.

• data using ES6 arrow functions
• data object return
• data es5 style functions

In this blog post, We are going to learn multiple ways to define data function in the vuejs component with examples

data arrow functions in vuejs

arrow functions introduced in the ES6 JavaScript language. Vue components can be declared with data arrow function as seen below.

Arrow functions are a new way of declaring using()=> syntax. these functions won’t have this context inside them. What does mean it? Inside the function, this.HelloWorld props object not return Component props, **this** represents current window scope, not component scope, This. component throws below error to console as these are bound to parent context.

Uncaught TypeError: Cannot read property ‘InputBlurExample’ of undefined

export default {
    props: ['HelloWorld'],
    data: () => ( {
      name: 'Franc',
      data: this.HelloWorld // undefined
    })
}

return keyword returns the object in the data function

The same way can be returned using implicit return syntax

export default {
    props: ['HelloWorld'],
    data: () => ({
      name: 'Franc',
      data: this.HelloWorld // undefined
    })
}

data object without function

Declared data object rather function and initialized with 0 value, property in data are shared by multiple component instances.

what is the issue here? if this component is used in five places, the values are different for each component usage. This is the only drawback.

export default {
    props: ['HelloWorld'],
    data:{
      increment:0,
    }
}

data function object

Every component shares data object, if you declare the data as function, It very easy mutate the state

export default {
    props: ['HelloWorld'],
    data: function(){
        return {increment:0},
    }
}

It is the ES5 way of declaring a function in javascript.

The above is trimmed with little coding.

export default {
    props: ['HelloWorld'],
    data: {
        return {increment:0},
    }
}

export default { name: “InputBlurExample”, data() { }, methods: { blurEvent: function (e) { const email = e.target.value; console.log(email); }, }, }; data in vuejs return the f data: () => { return { stripe: null, stripePK: stripePK, … } }

How to call methods in the data function

data function returned object contains functions which can instance methods

This will be very useful when you are calling other components event handlers in parent-child components,

export default {
  name: "InputComponent",
  data() {
    var self = this;
    return {
      onClick: function () {
        self.mymethod();
      },
    };
  },

  methods: {
    mymethod: function () {},
  },
};
</script>

Conclusion,

In this blog post, You learned multiple approaches to create a data function and return an object.

I hope you learned new things with this.