1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
/**
* @author Toru Nagashima
* @copyright 2017 Toru Nagashima. All rights reserved.
* See LICENSE file in root directory for full license.
*/
'use strict'
// ------------------------------------------------------------------------------
// Requirements
// ------------------------------------------------------------------------------
const utils = require('../utils')
// ------------------------------------------------------------------------------
// Helpers
// ------------------------------------------------------------------------------
const VALID_MODIFIERS = new Set(['lazy', 'number', 'trim'])
/**
* Check whether the given node is valid or not.
* @param {ASTNode} node The element node to check.
* @returns {boolean} `true` if the node is valid.
*/
function isValidElement (node) {
const name = node.name
return (
name === 'input' ||
name === 'select' ||
name === 'textarea' ||
(
name !== 'keep-alive' &&
name !== 'slot' &&
name !== 'transition' &&
name !== 'transition-group' &&
utils.isCustomComponent(node)
)
)
}
/**
* Check whether the given node can be LHS.
* @param {ASTNode} node The node to check.
* @returns {boolean} `true` if the node can be LHS.
*/
function isLhs (node) {
return node != null && (
node.type === 'Identifier' ||
node.type === 'MemberExpression'
)
}
/**
* Get the variable by names.
* @param {string} name The variable name to find.
* @param {ASTNode} leafNode The node to look up.
* @returns {Variable|null} The found variable or null.
*/
function getVariable (name, leafNode) {
let node = leafNode
while (node != null) {
const variables = node.variables
const variable = variables && variables.find(v => v.id.name === name)
if (variable != null) {
return variable
}
node = node.parent
}
return null
}
// ------------------------------------------------------------------------------
// Rule Definition
// ------------------------------------------------------------------------------
module.exports = {
meta: {
type: 'problem',
docs: {
description: 'enforce valid `v-model` directives',
category: 'essential',
url: 'https://eslint.vuejs.org/rules/valid-v-model.html'
},
fixable: null,
schema: []
},
create (context) {
return utils.defineTemplateBodyVisitor(context, {
"VAttribute[directive=true][key.name='model']" (node) {
const element = node.parent.parent
const name = element.name
if (!isValidElement(element)) {
context.report({
node,
loc: node.loc,
message: "'v-model' directives aren't supported on <{{name}}> elements.",
data: { name }
})
}
if (name === 'input' && utils.hasAttribute(element, 'type', 'file')) {
context.report({
node,
loc: node.loc,
message: "'v-model' directives don't support 'file' input type."
})
}
if (node.key.argument) {
context.report({
node,
loc: node.loc,
message: "'v-model' directives require no argument."
})
}
for (const modifier of node.key.modifiers) {
if (!VALID_MODIFIERS.has(modifier)) {
context.report({
node,
loc: node.loc,
message: "'v-model' directives don't support the modifier '{{name}}'.",
data: { name: modifier }
})
}
}
if (!utils.hasAttributeValue(node)) {
context.report({
node,
loc: node.loc,
message: "'v-model' directives require that attribute value."
})
}
if (node.value) {
if (!isLhs(node.value.expression)) {
context.report({
node,
loc: node.loc,
message: "'v-model' directives require the attribute value which is valid as LHS."
})
}
for (const reference of node.value.references) {
const id = reference.id
if (id.parent.type !== 'VExpressionContainer') {
continue
}
const variable = getVariable(id.name, element)
if (variable != null) {
context.report({
node,
loc: node.loc,
message: "'v-model' directives cannot update the iteration variable '{{varName}}' itself.",
data: { varName: id.name }
})
}
}
}
}
})
}
}