Skip to content

Commit cc4f4c5

Browse files
yyx990803yyx990803
committed
v-elseif -> v-else-if
1 parent af78bcf commit cc4f4c5

File tree

7 files changed

+48
-45
lines changed

7 files changed

+48
-45
lines changed

‎src/compiler/parser/index.js

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -154,7 +154,7 @@ export function parse (
154154
root = element
155155
checkRootConstraints(root)
156156
} else if (!stack.length) {
157-
// allow root elements with v-if, v-elseif and v-else
157+
// allow root elements with v-if, v-else-if and v-else
158158
if (root.if && (element.elseif || element.else)) {
159159
checkRootConstraints(element)
160160
addIfCondition(root, {
@@ -164,7 +164,10 @@ export function parse (
164164
} else if (process.env.NODE_ENV !== 'production' && !warned) {
165165
warned = true
166166
warn(
167-
`Component template should contain exactly one root element:\n\n${template}`
167+
`Component template should contain exactly one root element:` +
168+
`\n\n${template}\n\n` +
169+
`If you are using v-if on multiple elements, ` +
170+
`use v-else-if to chain them instead.`
168171
)
169172
}
170173
}
@@ -327,7 +330,7 @@ function processIf (el) {
327330
if (getAndRemoveAttr(el, 'v-else') != null) {
328331
el.else = true
329332
}
330-
const elseif = getAndRemoveAttr(el, 'v-elseif')
333+
const elseif = getAndRemoveAttr(el, 'v-else-if')
331334
if (elseif) {
332335
el.elseif = elseif
333336
}
@@ -343,7 +346,7 @@ function processIfConditions (el, parent) {
343346
})
344347
} else if (process.env.NODE_ENV !== 'production') {
345348
warn(
346-
`v-${el.elseif ? ('elseif="' + el.elseif + '"') : 'else'} ` +
349+
`v-${el.elseif ? ('else-if="' + el.elseif + '"') : 'else'} ` +
347350
`used on element <${el.tag}> without corresponding v-if.`
348351
)
349352
}

‎test/unit/features/directives/if.spec.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -88,12 +88,12 @@ describe('Directive v-if', () => {
8888
}).then(done)
8989
})
9090

91-
it('should work well with v-elseif', done => {
91+
it('should work well with v-else-if', done => {
9292
const vm = new Vue({
9393
template: `
9494
<div>
9595
<span v-if="foo">hello</span>
96-
<span v-elseif="bar">elseif</span>
96+
<span v-else-if="bar">elseif</span>
9797
<span v-else>bye</span>
9898
</div>
9999
`,

‎test/unit/features/directives/once.spec.js

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -242,25 +242,25 @@ describe('Directive v-once', () => {
242242
}).then(done)
243243
})
244244

245-
it('should work inside v-for with nested v-elseif and v-else', done => {
245+
it('should work inside v-for with nested v-else-if and v-else', done => {
246246
const vm = new Vue({
247247
data: {
248248
tester: false,
249249
list: [{ id: 0, text: 'a', tester: true, truthy: 'y' }]
250250
},
251251
template: `
252252
<div v-if="0"></div>
253-
<div v-elseif="tester">
253+
<div v-else-if="tester">
254254
<div v-for="i in list" :key="i.id">
255255
<span v-if="i.tester" v-once>{{ i.truthy }}</span>
256-
<span v-elseif="tester" v-once>{{ i.text }}elseif</span>
256+
<span v-else-if="tester" v-once>{{ i.text }}elseif</span>
257257
<span v-else v-once>{{ i.text }}</span>
258258
</div>
259259
</div>
260260
<div v-else>
261261
<div v-for="i in list" :key="i.id">
262262
<span v-if="i.tester" v-once>{{ i.truthy }}</span>
263-
<span v-elseif="tester">{{ i.text }}elseif</span>
263+
<span v-else-if="tester">{{ i.text }}elseif</span>
264264
<span v-else v-once>{{ i.text }}</span>
265265
</div>
266266
</div>

‎test/unit/features/directives/style.spec.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -305,12 +305,12 @@ describe('Directive v-bind:style', () => {
305305
}).then(done)
306306
})
307307

308-
it('should not merge for v-if, v-elseif and v-else elements', (done) => {
308+
it('should not merge for v-if, v-else-if and v-else elements', (done) => {
309309
const vm = new Vue({
310310
template:
311311
'<div>' +
312312
'<section style="color: blue" :style="style" v-if="foo"></section>' +
313-
'<section style="margin-top: 12px" v-elseif="bar"></section>' +
313+
'<section style="margin-top: 12px" v-else-if="bar"></section>' +
314314
'<section style="margin-bottom: 24px" v-else></section>' +
315315
'<div></div>' +
316316
'</div>',

‎test/unit/modules/compiler/codegen.spec.js

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -83,23 +83,23 @@ describe('codegen', () => {
8383
)
8484
})
8585

86-
it('generate v-elseif directive', () => {
86+
it('generate v-else-if directive', () => {
8787
assertCodegen(
88-
'<div><p v-if="show">hello</p><p v-elseif="hide">world</p></div>',
88+
'<div><p v-if="show">hello</p><p v-else-if="hide">world</p></div>',
8989
`with(this){return _h('div',[(show)?_h('p',["hello"]):(hide)?_h('p',["world"]):_e()])}`
9090
)
9191
})
9292

93-
it('generate v-elseif with v-else directive', () => {
93+
it('generate v-else-if with v-else directive', () => {
9494
assertCodegen(
95-
'<div><p v-if="show">hello</p><p v-elseif="hide">world</p><p v-else>bye</p></div>',
95+
'<div><p v-if="show">hello</p><p v-else-if="hide">world</p><p v-else>bye</p></div>',
9696
`with(this){return _h('div',[(show)?_h('p',["hello"]):(hide)?_h('p',["world"]):_h('p',["bye"])])}`
9797
)
9898
})
9999

100-
it('generate mutli v-elseif with v-else directive', () => {
100+
it('generate mutli v-else-if with v-else directive', () => {
101101
assertCodegen(
102-
'<div><p v-if="show">hello</p><p v-elseif="hide">world</p><p v-elseif="3">elseif</p><p v-else>bye</p></div>',
102+
'<div><p v-if="show">hello</p><p v-else-if="hide">world</p><p v-else-if="3">elseif</p><p v-else>bye</p></div>',
103103
`with(this){return _h('div',[(show)?_h('p',["hello"]):(hide)?_h('p',["world"]):(3)?_h('p',["elseif"]):_h('p',["bye"])])}`
104104
)
105105
})

‎test/unit/modules/compiler/optimizer.spec.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -213,10 +213,10 @@ describe('optimizer', () => {
213213
it('mark static trees inside v-for with nested v-else and v-once', () => {
214214
const ast = parse(`
215215
<div v-if="1"></div>
216-
<div v-elseif="2">
216+
<div v-else-if="2">
217217
<div v-for="i in 10" :key="i">
218218
<div v-if="1">{{ i }}</div>
219-
<div v-elseif="2" v-once>{{ i }}</div>
219+
<div v-else-if="2" v-once>{{ i }}</div>
220220
<div v-else v-once>{{ i }}</div>
221221
</div>
222222
</div>

‎test/unit/modules/compiler/parser.spec.js

Lines changed: 25 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -88,8 +88,8 @@ describe('parser', () => {
8888
.not.toHaveBeenWarned()
8989
})
9090

91-
it('not warn 3 root elements with v-if, v-elseif and v-else', () => {
92-
parse('<div v-if="1"></div><div v-elseif="2"></div><div v-else></div>', baseOptions)
91+
it('not warn 3 root elements with v-if, v-else-if and v-else', () => {
92+
parse('<div v-if="1"></div><div v-else-if="2"></div><div v-else></div>', baseOptions)
9393
expect('Component template should contain exactly one root element')
9494
.not.toHaveBeenWarned()
9595
})
@@ -103,20 +103,20 @@ describe('parser', () => {
103103
.not.toHaveBeenWarned()
104104
})
105105

106-
it('not warn 3 or more root elements with v-if, v-elseif and v-else on separate lines', () => {
106+
it('not warn 3 or more root elements with v-if, v-else-if and v-else on separate lines', () => {
107107
parse(`
108108
<div v-if="1"></div>
109-
<div v-elseif="2"></div>
109+
<div v-else-if="2"></div>
110110
<div v-else></div>
111111
`, baseOptions)
112112
expect('Component template should contain exactly one root element')
113113
.not.toHaveBeenWarned()
114114

115115
parse(`
116116
<div v-if="1"></div>
117-
<div v-elseif="2"></div>
118-
<div v-elseif="3"></div>
119-
<div v-elseif="4"></div>
117+
<div v-else-if="2"></div>
118+
<div v-else-if="3"></div>
119+
<div v-else-if="4"></div>
120120
<div v-else></div>
121121
`, baseOptions)
122122
expect('Component template should contain exactly one root element')
@@ -135,7 +135,7 @@ describe('parser', () => {
135135
it('generate correct ast for 3 or more root elements with v-if and v-else on separate lines', () => {
136136
const ast = parse(`
137137
<div v-if="1"></div>
138-
<span v-elseif="2"></span>
138+
<span v-else-if="2"></span>
139139
<p v-else></p>
140140
`, baseOptions)
141141
expect(ast.tag).toBe('div')
@@ -145,9 +145,9 @@ describe('parser', () => {
145145

146146
const astMore = parse(`
147147
<div v-if="1"></div>
148-
<span v-elseif="2"></span>
149-
<div v-elseif="3"></div>
150-
<span v-elseif="4"></span>
148+
<span v-else-if="2"></span>
149+
<div v-else-if="3"></div>
150+
<span v-else-if="4"></span>
151151
<p v-else></p>
152152
`, baseOptions)
153153
expect(astMore.tag).toBe('div')
@@ -170,17 +170,17 @@ describe('parser', () => {
170170
.toHaveBeenWarned()
171171
})
172172

173-
it('warn 3 root elements with v-if and v-elseif on first 2', () => {
174-
parse('<div v-if="1"></div><div v-elseif></div><div></div>', baseOptions)
173+
it('warn 3 root elements with v-if and v-else-if on first 2', () => {
174+
parse('<div v-if="1"></div><div v-else-if></div><div></div>', baseOptions)
175175
expect('Component template should contain exactly one root element:\n\n' +
176-
'<div v-if="1"></div><div v-elseif></div><div></div>')
176+
'<div v-if="1"></div><div v-else-if></div><div></div>')
177177
.toHaveBeenWarned()
178178
})
179179

180-
it('warn 4 root elements with v-if, v-elseif and v-else on first 2', () => {
181-
parse('<div v-if="1"></div><div v-elseif></div><div v-else></div><div></div>', baseOptions)
180+
it('warn 4 root elements with v-if, v-else-if and v-else on first 2', () => {
181+
parse('<div v-if="1"></div><div v-else-if></div><div v-else></div><div></div>', baseOptions)
182182
expect('Component template should contain exactly one root element:\n\n' +
183-
'<div v-if="1"></div><div v-elseif></div><div v-else></div><div></div>')
183+
'<div v-if="1"></div><div v-else-if></div><div v-else></div><div></div>')
184184
.toHaveBeenWarned()
185185
})
186186

@@ -191,10 +191,10 @@ describe('parser', () => {
191191
.toHaveBeenWarned()
192192
})
193193

194-
it('warn 2 root elements with v-if and v-elseif with v-for on 2nd', () => {
195-
parse('<div v-if="1"></div><div v-elseif="2" v-for="i in [1]"></div>', baseOptions)
194+
it('warn 2 root elements with v-if and v-else-if with v-for on 2nd', () => {
195+
parse('<div v-if="1"></div><div v-else-if="2" v-for="i in [1]"></div>', baseOptions)
196196
expect('Cannot use v-for on stateful component root element because it renders multiple elements:\n' +
197-
'<div v-if="1"></div><div v-elseif="2" v-for="i in [1]"></div>')
197+
'<div v-if="1"></div><div v-else-if="2" v-for="i in [1]"></div>')
198198
.toHaveBeenWarned()
199199
})
200200

@@ -270,8 +270,8 @@ describe('parser', () => {
270270
expect(ast.conditions[0].exp).toBe('show')
271271
})
272272

273-
it('v-elseif directive syntax', () => {
274-
const ast = parse('<div><p v-if="show">hello</p><span v-elseif="2">elseif</span><p v-else>world</p></div>', baseOptions)
273+
it('v-else-if directive syntax', () => {
274+
const ast = parse('<div><p v-if="show">hello</p><span v-else-if="2">elseif</span><p v-else>world</p></div>', baseOptions)
275275
const ifAst = ast.children[0]
276276
const conditionsAst = ifAst.conditions
277277
expect(conditionsAst.length).toBe(3)
@@ -290,9 +290,9 @@ describe('parser', () => {
290290
expect(conditionsAst[1].block.parent).toBe(ast)
291291
})
292292

293-
it('v-elseif directive invalid syntax', () => {
294-
parse('<div><p v-elseif="1">world</p></div>', baseOptions)
295-
expect('v-elseif="1" used on element').toHaveBeenWarned()
293+
it('v-else-if directive invalid syntax', () => {
294+
parse('<div><p v-else-if="1">world</p></div>', baseOptions)
295+
expect('v-else-if="1" used on element').toHaveBeenWarned()
296296
})
297297

298298
it('v-else directive invalid syntax', () => {

0 commit comments

Comments
 (0)