Parsing error: unexpected token ':'

JavaScript
1

Hi everyone, I have a (hopefully) quick question. I am working on a project that has come up with an ‘eslint’ Parsing error: Unexpected token, expected ";" for the dateFormatted section in the code below.

data: () => {

        date: null,
        dateFormatted: null,
        menu: false,

I am using vueJS in this part, and have the feeling that I need to fix the data: ()... part, but am currently know lost. Any help would be greatly appreciated!
Thanks,
Boris
(p.s. if there is not enough info, let me know… :slight_smile: )

2

If it’s supposed to be an arrow function that returns an object, you should wrap it further with parentheses.

data: () => ({
  date: null,
  // ...
});

Otherwise JS will try to interpret it as a function block.

3

Ah I see, thankyou! A continuing question then if I may. I have seen a few different versions of this, each presenting ‘data’ in a different way,

data: () => ({
}),
data () { 
};
data: function() {
};

What is the difference, and how do they apply?? (and also how do I know which one to use in which situation??)

4

The second one is more or less a shorthand for the third one (they’re only applicable in objects though).

The first one is an arrow function. They might also look like a shorthand for a regular function (I guess most of the time they’re used as such), but arrow functions behave differently when the this keyword is involved.

5

Right, cool thankyou!