Linter error on demo code

[davestewart]

Hey,

I know the demo code is just to start us off, but I'm getting a linter error, and when I look at the JS, I don't actually understand the syntax.

The error is:

/Users/davestewart/Sites/dev/vue-element/client/components/Sidebar/index.vue (2/0)
  ✖  37:7   Unexpected labeled statement                                           no-labels
  ✖  37:15  Expected an assignment or function call and instead saw an expression  no-unused-expressions

✖ 2 errors (5:09:39 PM)

The code is:

export default {
  name: 'Sidebar',
  props: ['active'],
  computed () {
      active: () => {
          console.log(this)
          return this.active
      }
  }
}

https://github.com/Metnew/vue-element-starter/blob/master/client/components/Sidebar/index.vue#L33-L38

So even though the syntax looks "wrong" to me, but webpack compiles OK.

The computed object looks to me to be using shorthand method syntax (even a colleague agreed) yet the Vue docs say computed should be an Object.

If I remove the () (which I think should make computed a function with a body that doesn't make sense) then Webpack complains and the component doesn't compile.

What is this weird object / function syntax!? Is this ES6, or something that gets bent to the will of Webpack!?

Again, sorry to ask you something that is outside of the scope of a traditional bug, but I can't compile if I do things what I think should be a normal ES6 way.

Thanks, Dave

[mattcode55]

I think that it's caused by the extra :, so it should just become as follows:

export default {
  name: 'Sidebar',
  props: ['active'],
  computed () {
      active () => {
          console.log(this)
          return this.active
      }
  }
}