Bug: Attributes' value with spread operator is not being parsed

[michalsnik]

I confirmed the following issue: vuejs/eslint-plugin-vue#497

This code:

<input v-on="{ ...$listeners }" />

results in the following AST:

         - type: VAttribute
            directive: true
            key:
              type: VDirectiveKey
              name: on
              argument: null
              modifiers: []
              shorthand: false
              raw:
                name: on
                argument: null
                modifiers: []
            value:
              type: VExpressionContainer
              expression: null
              references: []

Whereas for this:

<input v-on="{ click: action }" />

we get the correct AST with VOnExpression:

         - type: VAttribute
            directive: true
            key:
              type: VDirectiveKey
              name: on
              argument: null
              modifiers: []
              shorthand: false
              raw:
                name: on
                argument: null
                modifiers: []
            value:
              type: VExpressionContainer
              expression:
                type: VOnExpression
                body:
                  - type: BlockStatement
                    body:
                      - type: LabeledStatement
                        body:
                          type: ExpressionStatement
                          expression:
                            type: Identifier
                            name: action
                        label:
                          type: Identifier
                          name: click
              references:
                - id:
                    type: Identifier
                    name: action
                  mode: r

Can we parse objects with spread operators inside attributes' values properly? Same applies to attributes and bindings.

[mysticatea]

Thank you for this issue.

Try parserOptions.ecmaVersion: 2018 because rest/spread properties has been supported since ES2018.

Ah, sorry.
Currently, v-on attribute values are parsed as statements because foo(); bar();-like code is supported. I have to investigate how Vue.js handles it.

[michalsnik]

Thanks!

[mysticatea]

I confirmed that the paths of v-on and v-on:foo are different. v-on:foo="{}" becomes a block statement, but v-on="{}" becomes an object expression. I will fix vue-eslint-parser.

[mysticatea]

I'm thinking about AST, v-on="{ click: action }" skips VOnExpression node because it's not supporting statements.

It will be:

         - type: VAttribute
            directive: true
            key:
              type: VDirectiveKey
              name: on
              argument: null
              modifiers: []
              shorthand: false
              raw:
                name: on
                argument: null
                modifiers: []
            value:
              type: VExpressionContainer
              expression:
                type: ObjectExpression
                properties:
                  - type: Property
                    computed: false
                    method: false
                    shorthand: false
                    key:
                      type: Identifier
                      name: click
                    value:
                      type: Identifier
                      name: action
              references:
                - id:
                    type: Identifier
                    name: action
                  mode: r

Probably we will have to modify some rules which are checking v-on attribute.

[pedroSoaresll]

i have the same problem, my currently vue-eslint-parser version is 6.0.3

[mateuswetah]

Hey @mysticatea I'm facing the same problem of @pedroSoaresll here. I'm actually stuck on version ^4.7.1 because of that. Any suggestions?