Resolve Variable $event in JSX

[LucienLee]

Tell us about your environment

ESLint Version: 4.13.0
eslint-plugin-vue Version: 4.0.0-beta.2
Node Version: 8.9.1

Please show your full configuration:

module.exports = {
  env: {
    browser: true,
  },
  extends: [
    'eslint:recommended',
    'plugin:vue/recommended'
  ],
  plugins: [
     'vue'
  ]
}

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

export default {
  methods: {
     handleClick(e) {
        console.log(e)
     }
  },
  render() {
    return <div onClick={this.handleClick($event)} ></div>
  }
}

What did you expect to happen?
eslint should know $event is a preserved variable, rather warn no-undef.

What actually happened? Please include the actual, raw output from ESLint.
[eslint] '$event' is not defined. (no-undef)

[mysticatea]

Thank you for this report.

I'm not familiar with Vue+JSX, to make sure, is the code correct? It looks to use $event in the scope of the render function.

[LucienLee]

$event is use to bind original DOM event in an inline statement handler.
For example:

<button on-click={this.warn($event, 'Form cannot be submitted yet.')}>Submit</button>

//...
methods: {
  warn: function (event, message) {
    // now we have access to the native event
    if (event) event.preventDefault()
    alert(message)
  }
}

There is another way to do that, but I think that both way should support.

<button on-click={this.warn('Form cannot be submitted yet.')}>Submit</button>

//...
methods: {
  warn: function (message, event) {
    // event still can access here
  }
}

[mysticatea]

I know that v-on directive of Vue.js template makes a function that its function body is the attribute value. In that case, the scope of the function has $event variable.

However, as far as I know, JSX's expression container does not make such function. So I guessed that <div onClick={this.handleClick($event)}> is converted to h("div", { on: { click: this.handleClick($event) } }, []), i.e. the click event handler is the returned value of this.handleClick($event), based on the document https://github.com/vuejs/babel-plugin-transform-vue-jsx#difference-from-react-jsx.

But I'm not familiar with Vue+JSX, I want to get clear.

[LucienLee]

Yeah, I think that you're right. The conversion is done by vue-template-compiler.

https://github.com/vuejs/vue/blob/1dd6b6f046c3093950e599ccc6bbe7a393b8a494/src/compiler/codegen/events.js#L90

[michalsnik]

Hello @LucienLee I'm afraid we can't do anything about it.

As with no-used-vars rule we could have fixed it here with jsx-uses-vars rule by using eslint context method markVariableAsUsed on each <component> node in JSX. But unfortunately there is no way to explicitly mark some variables as defined in given scopes.

All you can do is to just use globals setting in .eslintrc.js and add $event there @LucienLee

Though if you @mysticatea have any out-of-the-box ideas regarding possible solutions that I might not be aware of please reopen this issue and share them here :)

Cheers!

[mysticatea]

@michalsnik It's feasible, so I wanted to know the correct specification. In this case, globals option is not ideal because it causes false negative of no-undef rule.