And so that's what we're gonna talk about in this guide, we're going to see how we can call a function from within the vue. So I'm going to get rid of that sample code, just so it's not confusing there.

And right here you can see in this H-2 that it says hi followed by a name.

Well we can actually encapsulate all of that behavior into a function. So instead of saying Hi name what we can do is just call a function. So we'll call the function greeting and because it's a function we need to pass in the parens like this.

index.html

<div id="app">
  <h2></h2>

And this by itself isn't going to do anything but what we need to do now is to go into our file and we're going to create another key value pair. So as you can see right here we have data but we can also pass in methods. So this is another reserved word inside of vue, so I'm going to say methods.

And this is where you're going to keep track of all of the custom methods that you add to your program. So the syntax for this is a little bit different than pure vanilla javascript, if you're coming at this from that perspective you may think that you'd write a function something like this where you'd say function and then greeting and then pass that data in and then run it just like this.

methods: {
  function greeting() {

  }
}

But whenever you're passing a method in, vue knows because it's in this method list it knows that this is going to be a function so you can skip that function call here and instead just give the name of the function just like this.

methods: {
  greeting() {

  }
}

Now this is a list so because methods is expecting a set of key value pairs this is going to look a little bit odd. I know the first time I saw this I thought the syntax looked interesting because technically I'm used to whenever I'm passing in an object, I'm used to doing something like this.

So say we had greeting and then we had some other method here called something like total.

methods: {
  greeting() {

  },
  total() {

  }
}

Well this doesn't really look like a set of key value pairs it almost looks a little bit more like an array but that's just the way that vue has it constructed. So just know that all of the list items like data, methods, and any of the others that we discuss in this course they are objects and some of them take key value pairs and some of them just take functions like this.

So inside of our greeting what we can do is let's start with hard coding the value so I can say return and then I'm going to use a string literal so I'm using backticks(`) if you've never used them before they are the character right above the tab character on your keyboard.

So I can just say Hi there just like this.

methods: {
  greeting() {
    return `Hi, there`;
  }
}

Now if I go and I check this you can see it says Hi there.

So this function is working properly it's defined in the methods list in our component and then it is being called properly from the vue. Now we can make this even more dynamic, so our method lists here they can directly interact with the data elements. So this name right here can be pulled into this greeting method.

So I can say hi and then using string interpellation, so that's just regular vanilla javascript. I'm gonna use a dollar followed by curly braces and then I can say this.name and close it off, hit save.

methods: {
  greeting() {
    return `Hi, ${this.name}`;
  }
}

Now if I come back and refresh, you can see it says Kristine right here.

So even though we are not passing this into the vue at all, we still have access to it. So we have the ability to reach in grab the data and if you're a little confused with how this works you are not alone. The word this the key word this in javascript is probably a question I get asked about more than anything else combined.

And so what it means is whenever you create a new instance of vue right here. And specifically when you create a new instance of this app one it knows about the name property Kristine.

So what we're saying is when we refer to this.name we are saying that whenever you create a new instance of this vue component what ever the name value is for that instance that's what we want to have access to and that's what we're referring to. And we're going to talk a lot about the keyword this throughout this course.

Now there's one more thing that I want to show you. So far I've shown you how the function can get data in from our data list right here directly in the component. But you may also have a situation where your function also needs to be able to take in data at the vue layer. So here inside a greeting I can pass in an argument just like I would with anything else.

So I can say Tiffany here inside of the index.html,

come back now instead of saying hi and then this name I can just pass in a argument here. So I'll say nameFromView, you can name yours whatever you'd like. And instead of calling this.name now I can reference this directly.

So I can say nameFromVue,

new Vue({
  el: "#app",
  data: {
    name: "Kristine"
  },
  methods: {
    greeting(nameFromView) {
      return `Hi, ${nameFromView}`;
    }
  }
});

hit save, come back and you can see it says Hi Tiffany.

So what this means is that we have multiple ways of passing data directly into our methods in our vue components, so we can access data directly from the component itself from that data property, then we can also reference it from taking in an argument into our function the same way we would just with vanilla javascript.

Now there's not one way that is better than another. The one thing I will say is that I usually reference the data property more than taking in an argument and the main reason for that is because usually when I'm accessing data it's usually related to some kind of outside API call.

So it may be something where I'm calling some third party service and I'm going to be doing that in the vue component and I'll store it inside of the data property and then I'll access it from within this method here.

But imagine a scenario where say you have a Rails project or a Laravel project and the data is not easily accessible in the javascript file but it is accessible inside of the HTML page inside of the view page.

So what you're able to do here is if this was coming in from Rails and this was just some kind of variable available inside this view file you could just pass it directly to the function and then vue would be able to handle it, just like it's doing right here.

So that's one thing I love about vue is it's very flexible it gives you the ability to really build the system however you see best and so that's something that you're going to see a lot especially when we get into the more advanced features.

In review what we did here was we saw how we were able to create and define a method inside of a view component, call it from with inside the outside HTML file and then we saw how we can access data in multiple ways both from the HTML view page and also from the component itself.

Resources

• Source Code