Description
Checklist
- I have tried restarting my IDE and the issue persists.
- I have read the FAQ and my problem is not listed.
Tell us about your environment
- ESLint version: 7.23.0
- eslint-plugin-vue version: 7.9.0
- Node version: v14.16.1
- Operating System: macOS 11.4
Please show your full configuration:
Sorry, partial config but the autofixes are coming from vue/no-deprecated-slot-attribute so I think this should suffice. Can provide full config if necessary.
'vue/no-deprecated-data-object-declaration': 'warn',
'vue/no-deprecated-slot-attribute': 'warn',
'vue/no-deprecated-slot-scope-attribute': 'warn',
'vue/no-deprecated-scope-attribute': 'warn',What did you do?
Ran autofix with vue/no-deprecated-slot-attribute enabled.
It autocorrected the old slot="slot-name" to the new #slot-name syntax, but broke the code in places where the element with slot="slot-name" is not an immediate child.
With the deprecated syntax slot="slot-name", it appears that content passed into the slot can be in nested <template> tags. https://jsfiddle.net/hirokiosame/vy6hejcx/
With the new syntax #slot-name, it appears that content passed into the slot much be an immediate child of the component it's being passed into. https://jsfiddle.net/hirokiosame/njbof5rv/
SomeComponent.vue
<template>
<div>
<slot name="some-slot" />
</div>
</template>This works:
<template>
<some-component>
<template slot="some-slot">
This works 1
</template>
<template v-if="true"> <!-- some arbitrary conditional -->
<template slot="some-slot">
This works 2
</template>
</template>
</some-component>
</template>
<script>
import SomeComponent from './SomeComponent.vue';
export default {
components: {
SomeComponent
}
}This doesn't work:
<template>
<some-component>
<template #some-slot>
This works 1
</template>
<template v-if="true"> <!-- some arbitrary conditional -->
<template #some-slot>
This doesn't work
</template>
</template>
</some-component>
</template>
<script>
import SomeComponent from './SomeComponent.vue';
export default {
components: {
SomeComponent
}
}What did you expect to happen?
For the autofix to not convert the slot="slot-name" to #slot-name if it's not being used on an immediate child.
What actually happened?
It autofixed, and is caught as an invalid slot usage by vue/valid-v-slot.
Repository to reproduce this issue
JSFiddle links above should suffice.