vuejs / eslint-plugin-vue

Official ESLint plugin for Vue.js
https://eslint.vuejs.org/
MIT License
4.47k stars 664 forks source link

v-bind with multiple arguments triggers no-parsing-error #1731

Open KaelWD opened 2 years ago

KaelWD commented 2 years ago

Checklist

Tell us about your environment

Please show your full configuration:

{
  root: true,
  parserOptions: {
    parser: '@typescript-eslint/parser',
    ecmaVersion: 2020,
    sourceType: 'module',
    project: './tsconfig.eslint.json',
    tsconfigRootDir: __dirname,
    extraFileExtensions: ['.vue'],
  },
  extends: [
    'standard',
    'plugin:vue/vue3-recommended',
    'plugin:sonarjs/recommended',
  ],
  env: {
    node: true,
    browser: true,
    es6: true,
  },
  plugins: [
    '@typescript-eslint',
    'sonarjs',
    'react',
  ],
  rules: { ... }

What did you do?

<v-menu>
  <template v-slot:activator="{ props: menu }">
    <v-tooltip bottom>
      <template v-slot:activator="{ props: tooltip }">
        <v-btn
          color="primary"
          dark
          v-bind="menu, tooltip"
        >
          Dropdown w/ Tooltip
        </v-btn>
      </template>
      <span>I'm A Tooltip</span>
    </v-tooltip>
  </template>
</v-menu>

What did you expect to happen? No warnings

What actually happened?

error: 'menu' is defined but never used (vue/no-unused-vars) at src/examples/v-menu/slot-activator-and-tooltip.vue:4:44:
  2 |   <div class="text-center">
  3 |     <v-menu>
> 4 |       <template v-slot:activator="{ props: menu }">
    |                                            ^
  5 |         <v-tooltip bottom>
  6 |           <template v-slot:activator="{ props: tooltip }">
  7 |             <v-btn

error: 'tooltip' is defined but never used (vue/no-unused-vars) at src/examples/v-menu/slot-activator-and-tooltip.vue:6:48:
  4 |       <template v-slot:activator="{ props: menu }">
  5 |         <v-tooltip bottom>
> 6 |           <template v-slot:activator="{ props: tooltip }">
    |                                                ^
  7 |             <v-btn
  8 |               color="primary"
  9 |               dark

error: Parsing error: Unexpected token ',' (vue/no-parsing-error) at src/examples/v-menu/slot-activator-and-tooltip.vue:10:27:
   8 |               color="primary"
   9 |               dark
> 10 |               v-bind="menu, tooltip"
     |                           ^
  11 |             >
  12 |               Dropdown w/ Tooltip
  13 |             </v-btn>

v-bind is compiled to a mergeProps call, so its value should be parsed as function arguments rather than an expression.

_createVNode(_component_v_btn, _mergeProps({
  color: "primary",
  dark: ""
}, menu, tooltip), { ...

Related: vuejs/core#1627

ota-meshi commented 2 years ago

Thank you for letting me know that it works with vue.

However, it also looks like a Vue unintended bug. I will watch what kind of reaction have to your comment. https://github.com/vuejs/vue-next/issues/4105#issuecomment-981330696