diff --git a/lib/rules/require-toggle-inside-transition.js b/lib/rules/require-toggle-inside-transition.js index bdbb5c2dd..fc46f75f9 100644 --- a/lib/rules/require-toggle-inside-transition.js +++ b/lib/rules/require-toggle-inside-transition.js @@ -32,9 +32,18 @@ module.exports = { if (utils.isCustomComponent(element)) { return } + + /** @type VElement */ // @ts-expect-error + const parent = element.parent + if (utils.hasAttribute(parent, 'appear')) { + return + } + if ( + element.name !== 'slot' && !utils.hasDirective(element, 'if') && - !utils.hasDirective(element, 'show') + !utils.hasDirective(element, 'show') && + !utils.hasDirective(element, 'bind', 'key') ) { context.report({ node: element.startTag, @@ -51,6 +60,7 @@ module.exports = { if (child !== node) { return } + verifyInsideElement(node) } }) diff --git a/tests/lib/rules/require-toggle-inside-transition.js b/tests/lib/rules/require-toggle-inside-transition.js index 0b64daaa3..18a33aa3e 100644 --- a/tests/lib/rules/require-toggle-inside-transition.js +++ b/tests/lib/rules/require-toggle-inside-transition.js @@ -57,6 +57,18 @@ tester.run('require-toggle-inside-transition', rule, { { filename: 'test.vue', code: '' + }, + { + filename: 'test.vue', + code: '' + }, + { + filename: 'test.vue', + code: '' + }, + { + filename: 'test.vue', + code: '' } ], invalid: [