Vue: Found Parsing Anomaly on Vue Component data() function Defintion

[Laraveldeep]

Found this while trying to play around with the example for Vue tutorial on Laracast https://laracasts.com/series/learn-vue-2-step-by-step/episodes/8

When Vue Component is defined using this coding style it doesn't work:

data()
{
  return
  {
  }
}

while this style works:

data() {
  return {
  }
}

Former gives following errors on dev tools:

[Vue warn]: data functions should return an object:
https://vuejs.org/v2/guide/components.html#data-Must-Be-a-Function

and

[Vue warn]: Property or method "tasks" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option.

Took me while to figure this out. Not sure what's going on. This is as of Vue 2.3.4

To reproduce please use these:
https://jsfiddle.net/Laraveldeep/4x5o2g2L/ (not working example)
https://jsfiddle.net/Laraveldeep/b4y7p0e2/1/ (working example)
or
Files here: https://github.com/Laraveldeep/VueComponentIssue

[yurovant]

This is not about Vue.js at all. It is about JavaScript itself.

[Laraveldeep]

@yurovant Can you elaborate on this a bit more? I am not aware of this. AFAIK coding styles doesn't matter at all for parser.

[yurovant]

Hi @Laraveldeep, please consider this answer - https://stackoverflow.com/questions/8528557/why-doesnt-a-javascript-return-statement-work-when-the-return-value-is-on-a-new

[LinusBorg]

vanilla JS demo as "proof": https://jsfiddle.net/Linusborg/541y9pbb/ ;)

[Laraveldeep]

Thanks! this is a gotcha I have learned hard way. :)

[Xm3a01]

Thanks -->شكرا<--