diff --git a/lib/rules/no-deprecated-model-definition.js b/lib/rules/no-deprecated-model-definition.js
index 9540ffc06..d88a5028a 100644
--- a/lib/rules/no-deprecated-model-definition.js
+++ b/lib/rules/no-deprecated-model-definition.js
@@ -12,7 +12,7 @@ const allowedEventNames = new Set(['update:modelValue', 'update:model-value'])
/**
* @param {ObjectExpression} node
* @param {string} key
- * @returns {Literal | undefined}
+ * @returns {Literal | TemplateLiteral | undefined}
*/
function findPropertyValue(node, key) {
const property = node.properties.find(
@@ -24,7 +24,7 @@ function findPropertyValue(node, key) {
if (
!property ||
property.type !== 'Property' ||
- property.value.type !== 'Literal'
+ !utils.isStringLiteral(property.value)
) {
return undefined
}
@@ -33,7 +33,7 @@ function findPropertyValue(node, key) {
/**
* @param {RuleFixer} fixer
- * @param {Literal} node
+ * @param {Literal | TemplateLiteral} node
* @param {string} text
*/
function replaceLiteral(fixer, node, text) {
@@ -93,10 +93,12 @@ module.exports = {
if (
!propName ||
!eventName ||
- typeof propName.value !== 'string' ||
- typeof eventName.value !== 'string' ||
- !allowedPropNames.has(propName.value) ||
- !allowedEventNames.has(eventName.value)
+ !allowedPropNames.has(
+ utils.getStringLiteralValue(propName, true) ?? ''
+ ) ||
+ !allowedEventNames.has(
+ utils.getStringLiteralValue(eventName, true) ?? ''
+ )
) {
context.report({
node: modelProperty,
diff --git a/tests/lib/rules/no-deprecated-model-definition.js b/tests/lib/rules/no-deprecated-model-definition.js
index 908be654a..ebdcb8599 100644
--- a/tests/lib/rules/no-deprecated-model-definition.js
+++ b/tests/lib/rules/no-deprecated-model-definition.js
@@ -52,6 +52,20 @@ tester.run('no-deprecated-model-definition', rule, {
`,
options: [{ allowVue3Compat: true }]
+ },
+ {
+ filename: 'test.vue',
+ code: `
+
+ `,
+ options: [{ allowVue3Compat: true }]
}
],
invalid: [
@@ -320,6 +334,58 @@ tester.run('no-deprecated-model-definition', rule, {
]
}
]
+ },
+ {
+ filename: 'test.vue',
+ code: `
+
+ `,
+ options: [{ allowVue3Compat: true }],
+ errors: [
+ {
+ message:
+ '`model` definition is deprecated. You may use the Vue 3-compatible `modelValue`/`update:modelValue` though.',
+ line: 4,
+ column: 11,
+ endLine: 7,
+ endColumn: 12,
+ suggestions: [
+ {
+ desc: 'Change to `modelValue`/`update:modelValue`.',
+ output: `
+
+ `
+ },
+ {
+ desc: 'Change to `model-value`/`update:model-value`.',
+ output: `
+
+ `
+ }
+ ]
+ }
+ ]
}
]
})