v-elseif -> v-else-if

src/compiler/parser/index.js

@@ -154,7 +154,7 @@ export function parse (
         root = element
         checkRootConstraints(root)
       } else if (!stack.length) {
-        // allow root elements with v-if, v-elseif and v-else
+        // allow root elements with v-if, v-else-if and v-else
         if (root.if && (element.elseif || element.else)) {
           checkRootConstraints(element)
           addIfCondition(root, {
@@ -164,7 +164,10 @@ export function parse (
         } else if (process.env.NODE_ENV !== 'production' && !warned) {
           warned = true
           warn(
-            `Component template should contain exactly one root element:\n\n${template}`
+            `Component template should contain exactly one root element:` +
+            `\n\n${template}\n\n` +
+            `If you are using v-if on multiple elements, ` +
+            `use v-else-if to chain them instead.`
           )
         }
       }
@@ -327,7 +330,7 @@ function processIf (el) {
     if (getAndRemoveAttr(el, 'v-else') != null) {
       el.else = true
     }
-    const elseif = getAndRemoveAttr(el, 'v-elseif')
+    const elseif = getAndRemoveAttr(el, 'v-else-if')
     if (elseif) {
       el.elseif = elseif
     }
@@ -343,7 +346,7 @@ function processIfConditions (el, parent) {
     })
   } else if (process.env.NODE_ENV !== 'production') {
     warn(
-      `v-${el.elseif ? ('elseif="' + el.elseif + '"') : 'else'} ` +
+      `v-${el.elseif ? ('else-if="' + el.elseif + '"') : 'else'} ` +
       `used on element <${el.tag}> without corresponding v-if.`
     )
   }

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

@@ -88,12 +88,12 @@ describe('Directive v-if', () => {
     }).then(done)
   })
 
-  it('should work well with v-elseif', done => {
+  it('should work well with v-else-if', done => {
     const vm = new Vue({
       template: `
         <div>
           <span v-if="foo">hello</span>
-          <span v-elseif="bar">elseif</span>
+          <span v-else-if="bar">elseif</span>
           <span v-else>bye</span>
         </div>
       `,

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

@@ -242,7 +242,7 @@ describe('Directive v-once', () => {
     }).then(done)
   })
 
-  it('should work inside v-for with nested v-elseif and v-else', done => {
+  it('should work inside v-for with nested v-else-if and v-else', done => {
     const vm = new Vue({
       data: {
         tester: false,
@@ -250,17 +250,17 @@ describe('Directive v-once', () => {
       },
       template: `
         <div v-if="0"></div>
-        <div v-elseif="tester">
+        <div v-else-if="tester">
           <div v-for="i in list" :key="i.id">
             <span v-if="i.tester" v-once>{{ i.truthy }}</span>
-            <span v-elseif="tester" v-once>{{ i.text }}elseif</span>
+            <span v-else-if="tester" v-once>{{ i.text }}elseif</span>
             <span v-else v-once>{{ i.text }}</span>
           </div>
         </div>
         <div v-else>
           <div v-for="i in list" :key="i.id">
             <span v-if="i.tester" v-once>{{ i.truthy }}</span>
-            <span v-elseif="tester">{{ i.text }}elseif</span>
+            <span v-else-if="tester">{{ i.text }}elseif</span>
             <span v-else v-once>{{ i.text }}</span>
           </div>
         </div>

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

@@ -305,12 +305,12 @@ describe('Directive v-bind:style', () => {
     }).then(done)
   })
 
-  it('should not merge for v-if, v-elseif and v-else elements', (done) => {
+  it('should not merge for v-if, v-else-if and v-else elements', (done) => {
     const vm = new Vue({
       template:
         '<div>' +
           '<section style="color: blue" :style="style" v-if="foo"></section>' +
-          '<section style="margin-top: 12px" v-elseif="bar"></section>' +
+          '<section style="margin-top: 12px" v-else-if="bar"></section>' +
           '<section style="margin-bottom: 24px" v-else></section>' +
           '<div></div>' +
         '</div>',

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

@@ -83,23 +83,23 @@ describe('codegen', () => {
     )
   })
 
-  it('generate v-elseif directive', () => {
+  it('generate v-else-if directive', () => {
     assertCodegen(
-      '<div><p v-if="show">hello</p><p v-elseif="hide">world</p></div>',
+      '<div><p v-if="show">hello</p><p v-else-if="hide">world</p></div>',
       `with(this){return _h('div',[(show)?_h('p',["hello"]):(hide)?_h('p',["world"]):_e()])}`
     )
   })
 
-  it('generate v-elseif with v-else directive', () => {
+  it('generate v-else-if with v-else directive', () => {
     assertCodegen(
-      '<div><p v-if="show">hello</p><p v-elseif="hide">world</p><p v-else>bye</p></div>',
+      '<div><p v-if="show">hello</p><p v-else-if="hide">world</p><p v-else>bye</p></div>',
       `with(this){return _h('div',[(show)?_h('p',["hello"]):(hide)?_h('p',["world"]):_h('p',["bye"])])}`
     )
   })
 
-  it('generate mutli v-elseif with v-else directive', () => {
+  it('generate mutli v-else-if with v-else directive', () => {
     assertCodegen(
-        '<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>',
+        '<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>',
         `with(this){return _h('div',[(show)?_h('p',["hello"]):(hide)?_h('p',["world"]):(3)?_h('p',["elseif"]):_h('p',["bye"])])}`
     )
   })

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

@@ -213,10 +213,10 @@ describe('optimizer', () => {
   it('mark static trees inside v-for with nested v-else and v-once', () => {
     const ast = parse(`
       <div v-if="1"></div>
-      <div v-elseif="2">
+      <div v-else-if="2">
         <div v-for="i in 10" :key="i">
           <div v-if="1">{{ i }}</div>
-          <div v-elseif="2" v-once>{{ i }}</div>
+          <div v-else-if="2" v-once>{{ i }}</div>
           <div v-else v-once>{{ i }}</div>
         </div>
       </div>

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

@@ -88,8 +88,8 @@ describe('parser', () => {
       .not.toHaveBeenWarned()
   })
 
-  it('not warn 3 root elements with v-if, v-elseif and v-else', () => {
-    parse('<div v-if="1"></div><div v-elseif="2"></div><div v-else></div>', baseOptions)
+  it('not warn 3 root elements with v-if, v-else-if and v-else', () => {
+    parse('<div v-if="1"></div><div v-else-if="2"></div><div v-else></div>', baseOptions)
     expect('Component template should contain exactly one root element')
         .not.toHaveBeenWarned()
   })
@@ -103,10 +103,10 @@ describe('parser', () => {
       .not.toHaveBeenWarned()
   })
 
-  it('not warn 3 or more root elements with v-if, v-elseif and v-else on separate lines', () => {
+  it('not warn 3 or more root elements with v-if, v-else-if and v-else on separate lines', () => {
     parse(`
       <div v-if="1"></div>
-      <div v-elseif="2"></div>
+      <div v-else-if="2"></div>
       <div v-else></div>
     `, baseOptions)
     expect('Component template should contain exactly one root element')
@@ -114,9 +114,9 @@ describe('parser', () => {
 
     parse(`
       <div v-if="1"></div>
-      <div v-elseif="2"></div>
-      <div v-elseif="3"></div>
-      <div v-elseif="4"></div>
+      <div v-else-if="2"></div>
+      <div v-else-if="3"></div>
+      <div v-else-if="4"></div>
       <div v-else></div>
     `, baseOptions)
     expect('Component template should contain exactly one root element')
@@ -135,7 +135,7 @@ describe('parser', () => {
   it('generate correct ast for 3 or more root elements with v-if and v-else on separate lines', () => {
     const ast = parse(`
       <div v-if="1"></div>
-      <span v-elseif="2"></span>
+      <span v-else-if="2"></span>
       <p v-else></p>
     `, baseOptions)
     expect(ast.tag).toBe('div')
@@ -145,9 +145,9 @@ describe('parser', () => {
 
     const astMore = parse(`
       <div v-if="1"></div>
-      <span v-elseif="2"></span>
-      <div v-elseif="3"></div>
-      <span v-elseif="4"></span>
+      <span v-else-if="2"></span>
+      <div v-else-if="3"></div>
+      <span v-else-if="4"></span>
       <p v-else></p>
     `, baseOptions)
     expect(astMore.tag).toBe('div')
@@ -170,17 +170,17 @@ describe('parser', () => {
       .toHaveBeenWarned()
   })
 
-  it('warn 3 root elements with v-if and v-elseif on first 2', () => {
-    parse('<div v-if="1"></div><div v-elseif></div><div></div>', baseOptions)
+  it('warn 3 root elements with v-if and v-else-if on first 2', () => {
+    parse('<div v-if="1"></div><div v-else-if></div><div></div>', baseOptions)
     expect('Component template should contain exactly one root element:\n\n' +
-        '<div v-if="1"></div><div v-elseif></div><div></div>')
+        '<div v-if="1"></div><div v-else-if></div><div></div>')
         .toHaveBeenWarned()
   })
 
-  it('warn 4 root elements with v-if, v-elseif and v-else on first 2', () => {
-    parse('<div v-if="1"></div><div v-elseif></div><div v-else></div><div></div>', baseOptions)
+  it('warn 4 root elements with v-if, v-else-if and v-else on first 2', () => {
+    parse('<div v-if="1"></div><div v-else-if></div><div v-else></div><div></div>', baseOptions)
     expect('Component template should contain exactly one root element:\n\n' +
-        '<div v-if="1"></div><div v-elseif></div><div v-else></div><div></div>')
+        '<div v-if="1"></div><div v-else-if></div><div v-else></div><div></div>')
         .toHaveBeenWarned()
   })
 
@@ -191,10 +191,10 @@ describe('parser', () => {
       .toHaveBeenWarned()
   })
 
-  it('warn 2 root elements with v-if and v-elseif with v-for on 2nd', () => {
-    parse('<div v-if="1"></div><div v-elseif="2" v-for="i in [1]"></div>', baseOptions)
+  it('warn 2 root elements with v-if and v-else-if with v-for on 2nd', () => {
+    parse('<div v-if="1"></div><div v-else-if="2" v-for="i in [1]"></div>', baseOptions)
     expect('Cannot use v-for on stateful component root element because it renders multiple elements:\n' +
-        '<div v-if="1"></div><div v-elseif="2" v-for="i in [1]"></div>')
+        '<div v-if="1"></div><div v-else-if="2" v-for="i in [1]"></div>')
         .toHaveBeenWarned()
   })
 
@@ -270,8 +270,8 @@ describe('parser', () => {
     expect(ast.conditions[0].exp).toBe('show')
   })
 
-  it('v-elseif directive syntax', () => {
-    const ast = parse('<div><p v-if="show">hello</p><span v-elseif="2">elseif</span><p v-else>world</p></div>', baseOptions)
+  it('v-else-if directive syntax', () => {
+    const ast = parse('<div><p v-if="show">hello</p><span v-else-if="2">elseif</span><p v-else>world</p></div>', baseOptions)
     const ifAst = ast.children[0]
     const conditionsAst = ifAst.conditions
     expect(conditionsAst.length).toBe(3)
@@ -290,9 +290,9 @@ describe('parser', () => {
     expect(conditionsAst[1].block.parent).toBe(ast)
   })
 
-  it('v-elseif directive invalid syntax', () => {
-    parse('<div><p v-elseif="1">world</p></div>', baseOptions)
-    expect('v-elseif="1" used on element').toHaveBeenWarned()
+  it('v-else-if directive invalid syntax', () => {
+    parse('<div><p v-else-if="1">world</p></div>', baseOptions)
+    expect('v-else-if="1" used on element').toHaveBeenWarned()
   })
 
   it('v-else directive invalid syntax', () => {