How can I implement arrow function in VueJS?

vue arrow functions
vue js
es6 arrow function
mounted method in vuejs
vue access this inside function
vue function is not defined
vuejs computed arrow
vue es6

My method in vue looks like this :

methods: { 
    setDate: async function () {
        console.log(this.modal)
    }
}

I want to change it to an arrow function. I tried like this :

methods: { 
    setDate: async () => {
        console.log(this.modal)
    }
}

There exist error like this :

Cannot read property 'modal' of undefined

How can I solve this problem?

You are facing this error because an arrow function wouldn't bind this to the vue instance for which you are defining the method. The same would happen if you were to define computed properties using an arrow function.

Don’t use arrow functions on an instance property or callback e.g.

vm.$watch('a', newVal => this.myMethod())

As arrow functions are bound to the parent context, this will not be the Vue instance as you’d expect and this.myMethod will be undefined.

You can read about it here.

Clean up your Vue modules with ES6 Arrow Functions � GitHub, Vue ES6 Conventions Use arrow functions for any callbacks inside "top level" methods. Use an arrow function with a "concise body" for component data closures. Im sharing information between two components in vue. In this moment I can get the value the created hook with an arrow function but, I cant asing this value for other property that I declared. I read that arrow functions doesnt work in created hook, I want to know how can I replace this arrow function and get the value that I need.

use function directly like

methods: { 
    async setDate() {
        console.log(this.modal)
    }
}

Using ES6 arrow functions in Vue.js, There are still times where you can use arrow functions with all their benefits, for instance if you Duration: 2:26 Posted: Feb 10, 2017 The only thing I can add here is that if you have functions inside those functions, e.g. a callback, then using arrow function will make your codes cleaner because it uses this object from the enclosing context, which is vue instance now. – Qiulang Jan 25 '18 at 3:30

This link https://michaelnthiessen.com/this-is-undefined/ says the following:

"An arrow function uses what is called lexical scoping. We'll get into this more in a bit, but it basically means that the arrow function takes this from it's context.

If you try to access this from inside of an arrow function that's on a Vue component, you'll get an error because this doesn't exist!

So in short, try to avoid using arrow functions on Vue components. It will save you a lot of headaches and confusion."

Using ES6 arrow functions in Vue modules, Use arrow functions for any callbacks inside “top level” methods. Use an arrow function with a “concise body” for component data closures. See how to implement� It seems that the template compiler is not generating correct code with function literals with a function name. See the difference here . Justineo added the bug label Mar 15, 2019

Render Functions & JSX — Vue.js, Let's dive into a simple example where a render function would be practical. v- model counterpart in render functions - you will have to implement the logic yourself: createElement in any method and getter (not functions or arrow functions),� Another place where arrow functions can get you in trouble is when they are going to be used in many different combinations, particularly in deep chains of function calls. The core reason is the same as with anonymous functions - they give really bad stacktraces .

arrow function syntax Code Example, Get code examples like "arrow function syntax" instantly right from your google search results with the Grepper Chrome Extension. Hello from arrow function. Again, in this example too, we can even remove the curly braces {} and the return keyword, like we did in the example above this one. JavaScript Arrow Function with Default Parameters: In JavaScript arrow functions we can also specify the default values for the parameters while defining the arrow function expression.

4 Essential ES2015 Features For Vue.js Development, Arrow functions are a new way to declare JavaScript functions. the array filter callback from above with those shorthands implemented: With arrow functions the this keyword always represents the object that defined the arrow function. Let us take a look at two examples to understand the difference. Both examples call a method twice, first when the page loads, and once again when the user clicks a button. The first example uses a regular function, and the second example uses an

Comments
  • you can directly use function as setDate () { }, there is no need to use :
  • methods: { setDate() { console.log(this.modal) } }
  • You should not use arrow function as a method in vue js.
  • Possible duplicate of VueJS: why is "this" undefined?
  • @VibhaChosla @Rich @Antonio Try to read my question well. I use async
  • is there a difference between async setDate() { and setDate: async function () {?
  • The former is a newer syntax introduced in ECMAScript 2015. So the only real difference is in terms of browser support