Vue Data Function

Posted on  by admin

How to call methods in the data function

Today’s topic is Variables And Functions in Vue Js. Vue.js is very rich when it comes to variables and data. It can handle integers, Boolean, lists, arrays, etc. basically anything that is JSON compatible. Also, we have standard JavaScript functions all available along with new functions that can be defined on a per Vue file scope. I am assuming you have some basic idea about Vue.js or you have read the previous article from the series. It is all about variables, all about data.

Everything happening is centered around data.

Web development, programming languages, Software testing & others

Vue.component('new component name', {
data: function () {
return {
count: 0
template: ''

VueJs supports all data types supported by js, most importantly JSON. I will not be posting code, as I have often found people directly pasting it and pulling their hair when their code fails to compile due to formatting or encoding errors.

Remember the Home File that is our front page?

data: function () {
return {
count: 0

Arrow functions in Vue

  • If you run your project it would look like this. We will be working with this page for now. Firstly we will clear everything inside it and write the following code by typing from the screenshot below.
  • In the script tag, you can see that we have done a default export.
  • All exports are basically JSON. Here we are just exporting one element called data.
  • Data is a function in Vue. We also need to return some actual data.
  • Hence you can see on line 10 that we have returned a JSON object with 2 keys, name and age.

Reference vs Invoke: function () { [native code] }

In the Template Tag, we have used double curly braces {{ name }}.

Template Tag

You could replace name with age.

App.vue file contained following code

You can print others keys as well. Beautiful isn’t it. It prints out my name. You could make it print out yours. Next, we want to do a small thing with functions, Let’s have a look. We just learned about data and variables in Vue. Now we should focus on functions. We want to work with functions.

Functions are the things that make stuff happen. So we will define some functions. You know the drill, look at the screenshot and copy the code. This might look complicated as we will discuss some data binding as well.

data function object

We have declared another element inside the JavaScript called methods, and we have created a function called increment.


The data section has a variable called count that has been initialized at 0. The function called increment increments the count variable by 1. Also, in the template tag, we have 2 new things. The Button tag has an action handler. It reads @click=increment, This simply tells vue, to run the function named increment when the button is clicked.

There is an input element with an attribute v-model=count. This tells vue to bind the value of the input element with the count variable. This means you could also manually set the count variable from the input element. Note – Vue Data is reactive, it means that whenever you change it from one place.

Reference data properties with this

The data change gets reflected in other places as well.

If all goes well, you should see similar output on your screen.

Just like I do on mine. Vue components and pages are basically JSON exports. They contain various elements. The data element houses all variables, the method element houses all functions.

Variables and Data

Data in Vue is reactive, When the value of a variable is changed from one place, it results in the same value being changed everywhere.

Source Code for HelloWorld.vue as follows.

I hope you have a basic idea of variables, data, and methods in vue. If you have any questions or suggestions, drop them in the comment section below. Using Vue you might surely asked yourself the question “why must data be a function that returns an object, and not just an object?”.

Especially considering that in some places, data is not a function, as you most probably see in the App component in several examples.

The explanation is that when the component is used multiple times, if it’s not a function, but a regular object, like this:. then because of how JavaScript works, every single instance of the component will share this property. This is not what you want in 99.9% of the cases, and instead you must do:. It might be non-intuitive at first, but once you accept this explanation and learn that it’s kind of harmful to your application, and a possible source of bugs, you’ll remember to always use a function for data. Download my free Vue Handbook! In this tutorial we learn how functions work in Vue. We cover how to reference data properties, use parameters and the problems we may encounter with arrow functions.

Finally, we cover a common issue with referencing and invoking functions. Functions in Vue. If you want to follow along with the examples in this lesson, you will need an app generated by the Vue CLI. If you already have one from the previous lesson, you can use it instead. At some point, our application will need more complex logic. We may want to perform operations on data, or simply separate some code. Vue gives us themethodsoption for the config object to store all the functions we want to use in a component.

The methods option expects an object as its value and inside it we can define comma separated standard Javascript functions without thefunctionkeyword.

noteThe functions we define here are only available to the current component, even if that component is imported into another.

Functions in Vue

As an example, let’s create a function that returns a string greeting message, then invoke the function in moustache syntax in the template to output it to the browser. When we run the example in the browser, we’ll see the greeting message. Let’s say we want to personalize the greeting example with a username defined as a data property.

Functions and Methods

When we try to save the file, Vue raises an error. The error is a bit misleading because it tells us thatusernameis not defined. To reference a data property, we need to usethiswith dot notation to access the property.