Skip to content

attributes-order doesn't specify where slot-scope goes. #432

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
GufNZ opened this issue Mar 15, 2018 · 6 comments
Closed

attributes-order doesn't specify where slot-scope goes. #432

GufNZ opened this issue Mar 15, 2018 · 6 comments
Labels

Comments

@GufNZ
Copy link
Contributor

GufNZ commented Mar 15, 2018

Tell us about your environment

  • ESLint Version: 4.18.2
  • eslint-plugin-vue Version: 4.3.0
  • Node Version: 8.9.4

Please show your full configuration: N/A

What did you do? Please include the actual source code causing the issue.
I have a template that uses a component supporting scoped slots, but the rule vue/attributes-order does not specify where the slot-scope attribute should go and treats it like a normal attribute in terms of order.

Before I updated to the version including this rule, I'd always written them first, like below:

<template>
   <component-with-scoped-slots>
      <div slot="left" slot-scope="{ someVar }" :class="leftSlotClasses">...</div>
      <div slot="right" slot-scope="{ someVar }" :class="rightSlotClasses">...</div>
   </component-with-scoped-slots>
</template>

What did you expect to happen?
I expected the position of slot and slot-scope to be the same in this rule.

What actually happened? Please include the actual, raw output from ESLint.
Since slot-scope is not explicitly covered, it is treated like any other custom attr, and expected to be after any bound ones.
[eslint] Attribute ":class" should go before "slot-scope". (vue/attributes-order)

I can make them read at the expected positions thusly:

   <div slot="left" :slot-scope="'{ someVar }'" :class="leftSlotClasses">...</div>

but that feels like cheating..

@GufNZ GufNZ changed the title attributes-order doesn't specify where slot and slot-scope go. attributes-order doesn't specify where slot-scope goes. Mar 15, 2018
@GufNZ
Copy link
Contributor Author

GufNZ commented Mar 15, 2018

Related to this, I'd have expected the name attribute for <slot> tags to also be near the start, but again, it's treated like a normal attribute.

@GufNZ
Copy link
Contributor Author

GufNZ commented Mar 15, 2018

Should something be done for <slot name=>, I wonder if it could be generalised to work for <input type= name=> as well? Just thinking out loud here..

@GufNZ
Copy link
Contributor Author

GufNZ commented Mar 15, 2018

Just realised my 'fix' of binding slot-scope breaks things entirely. It is ignored, and references to the vars that should have been defined result in errors at render time.

GufNZ added a commit to GufNZ/eslint-plugin-vue that referenced this issue Mar 22, 2018
@GufNZ
Copy link
Contributor Author

GufNZ commented Mar 22, 2018

Just noticed the tests for this rule don't cover the slot attribute anyway.
Will have to sort those outside of work hours..

@michalsnik
Copy link
Member

Thanks for posting this issue and working on it @GufNZ! Let me know once it's ready so I can review :) Let's leave <slot> case for now and focus on treating slot-scope as equal in terms of order to slot attribute.

@michalsnik michalsnik added the bug label Mar 22, 2018
@GufNZ
Copy link
Contributor Author

GufNZ commented Mar 22, 2018

@michalsnik The PR fixes just that, and I was going to make sure the tests cover the new change, but they don't yet cover [slot] anyway, so it could go in as is I guess. All the change does is add [slot-scope] to the same category as [slot], namely UNIQUE.

michalsnik pushed a commit that referenced this issue Mar 22, 2018
lisadeloach63 added a commit to lisadeloach63/plugin-develop-vue that referenced this issue Oct 7, 2022
Viktor949 added a commit to Viktor949/Eslint-Plugin-Vue that referenced this issue Oct 1, 2023
sebastianmensense added a commit to sebastianmensense/Eslint-Plugin-Vue- that referenced this issue Nov 15, 2023
Antontokarchuk0302 added a commit to Antontokarchuk0302/Eslint-plugin that referenced this issue Nov 16, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

2 participants