diff --git a/lib/rules/require-toggle-inside-transition.js b/lib/rules/require-toggle-inside-transition.js index fc46f75f9..423d4beb7 100644 --- a/lib/rules/require-toggle-inside-transition.js +++ b/lib/rules/require-toggle-inside-transition.js @@ -6,6 +6,20 @@ const utils = require('../utils') +/** + * @param {VDirective} vBindAppear + */ +function isValidBindAppear(vBindAppear) { + if ( + vBindAppear.value?.expression && + vBindAppear.value.expression.type === 'Literal' + ) { + return vBindAppear.value.expression?.value !== false + } + + return true +} + module.exports = { meta: { type: 'problem', @@ -35,7 +49,11 @@ module.exports = { /** @type VElement */ // @ts-expect-error const parent = element.parent - if (utils.hasAttribute(parent, 'appear')) { + const vBindAppear = utils.getDirective(parent, 'bind', 'appear') + if ( + utils.hasAttribute(parent, 'appear') || + (vBindAppear && isValidBindAppear(vBindAppear)) + ) { return } diff --git a/tests/lib/rules/require-toggle-inside-transition.js b/tests/lib/rules/require-toggle-inside-transition.js index 815f5de3d..d40ad4748 100644 --- a/tests/lib/rules/require-toggle-inside-transition.js +++ b/tests/lib/rules/require-toggle-inside-transition.js @@ -68,6 +68,15 @@ tester.run('require-toggle-inside-transition', rule, { { filename: 'test.vue', code: '' + }, + { + // https://github.com/vuejs/eslint-plugin-vue/issues/2467 + filename: 'test.vue', + code: '' + }, + { + filename: 'test.vue', + code: '' } ], invalid: [ @@ -113,6 +122,16 @@ tester.run('require-toggle-inside-transition', rule, { filename: 'test.vue', code: '', errors: [{ messageId: 'expected' }] + }, + { + filename: 'test.vue', + code: '', + errors: [{ messageId: 'expected' }] + }, + { + filename: 'test.vue', + code: '', + errors: [{ messageId: 'expected' }] } ] })