vue/valid-v-on and spread operator

[dmitry-saritasa]

Tell us about your environment

• ESLint Version: 4.19.1
• eslint-plugin-vue Version: 4.5.0
• Node Version: 8.11.2

Please show your full configuration:
https://gist.github.com/dmitry-saritasa/429bf70e3283ccabd6fe4555839d91ef

vue-loader.conf.js to support spread operator in v-on

'use strict'
const utils = require('./utils')
const config = require('../config')
const isProduction = process.env.NODE_ENV === 'production'
const sourceMapEnabled = isProduction
  ? config.build.productionSourceMap
  : config.dev.cssSourceMap

module.exports = {
  loaders: utils.cssLoaders({
    sourceMap: sourceMapEnabled,
    extract: isProduction
  }),
  cssSourceMap: sourceMapEnabled,
  cacheBusting: config.dev.cacheBusting,
  transformToRequire: {
    video: ['src', 'poster'],
    source: 'src',
    img: 'src',
    image: 'xlink:href'
  },
  buble: {
    objectAssign: 'Object.assign'
  }
}

What did you do? Please include the actual source code causing the issue.

template>
  <!--
    // replaced @input="$emit('input', $event.target.value)" with
    // v-on="$listeners", need testing
    // see more here
    // http://blog.webf.zone/vue-js-considerations-and-tricks-fa7e0e4bb7bb
  -->
  <div>
    <label class="form-label">{{ getLabel | capitalize }}</label>
    <input
      v-tooltip="getTooltipContent"
      :bind="$attrs"
      :type="type"
      :value="value"
      :placeholder="getPlaceHolder"
      :class="getClass"
      class="form-input"
      data-vv-validate-on="none"
      v-on="{
        ...$listeners,
        input: event => $emit('input', event.target.value)
      }">
  </div>
</template>

What did you expect to happen?
No errors to be displayed

What actually happened? Please include the actual, raw output from ESLint.

/home/dmitry/Projects/1k/frontend/src/lib/components/form/input.vue
19:7  error  'v-on' directives require that attribute value or verb modifiers                                                                                                                vue/valid-v-on
20:9  error  Parsing error: Line 2: Unexpected token

  1 | {{
> 2 |         ...$listeners,
    |         ^
  3 |         input: event => $emit('input', event.target.value)
  4 |       }}  vue/no-parsing-error

✖ 2 problems (2 errors, 0 warnings)

husky > pre-commit hook failed (add --no-verify to bypass)

[michalsnik]

Hey @dmitry-saritasa Thanks for pointing this!

It looks like part of the AST responsible for describing attributes' value is being omitted when the object inside has a spread operator. I posted issue in vue-eslint-parser about it.

But regarding to the second error - if you have eslint configured properly you should see this error. Try to put "plugin:vue/recommended" after airbnb in extends

[michalsnik]

Should be good on vue@next :)