make v-else work with v-show

Author: yyx990803

src/compiler/compile.js

@@ -488,16 +488,25 @@ function checkComponent (el, options, hasAttrs) {
  */
 
 function checkTerminalDirectives (el, options) {
-  if (_.attr(el, 'pre') !== null ||
-      el.hasAttribute(config.prefix + 'else')) {
+  // skip v-pre
+  if (_.attr(el, 'pre') !== null) {
     return skip
   }
+  // skip v-else block, but only if following v-if
+  if (el.hasAttribute(config.prefix + 'else')) {
+    var prev = el.previousElementSibling
+    if (prev && prev.hasAttribute(config.prefix + 'if')) {
+      return skip
+    }
+  }
   var value, dirName
   for (var i = 0, l = terminalDirectives.length; i < l; i++) {
     dirName = terminalDirectives[i]
-    if ((value = _.attr(el, dirName)) !== null) {
+    /* eslint-disable no-cond-assign */
+    if (value = el.getAttribute(config.prefix + dirName)) {
       return makeTerminalNodeLinkFn(el, dirName, value, options)
     }
+    /* eslint-enable no-cond-assign */
   }
 }
 
@@ -604,6 +613,12 @@ function compileDirectives (attrs, options) {
       dirName = name
         .slice(config.prefix.length)
         .replace(argRE, '')
+
+      // skip v-else (when used with v-show)
+      if (dirName === 'else') {
+        continue
+      }
+
       dirDef = resolveAsset(options, 'directives', dirName)
       if (process.env.NODE_ENV !== 'production') {
         _.assertAsset(dirDef, 'directive', dirName)

src/directives/show.js

@@ -1,8 +1,26 @@
+var _ = require('../util')
 var transition = require('../transition')
 
-module.exports = function (value) {
-  var el = this.el
-  transition.apply(el, value ? 1 : -1, function () {
-    el.style.display = value ? '' : 'none'
-  }, this.vm)
+module.exports = {
+
+  bind: function () {
+    // check else block
+    var next = this.el.nextElementSibling
+    if (next && _.attr(next, 'else') !== null) {
+      this.elseEl = next
+    }
+  },
+
+  update: function (value) {
+    var el = this.el
+    transition.apply(el, value ? 1 : -1, function () {
+      el.style.display = value ? '' : 'none'
+    }, this.vm)
+    var elseEl = this.elseEl
+    if (elseEl) {
+      transition.apply(elseEl, value ? -1 : 1, function () {
+        elseEl.style.display = value ? 'none' : ''
+      }, this.vm)
+    }
+  }
 }

test/unit/specs/directives/show_spec.js

@@ -15,7 +15,7 @@ if (_.inBrowser) {
     it('should work', function () {
       var dir = {
         el: el,
-        update: def,
+        update: def.update,
         vm: new Vue()
       }
       dir.update(false)
@@ -24,5 +24,27 @@ if (_.inBrowser) {
       expect(el.style.display).toBe('')
       expect(transition.apply).toHaveBeenCalled()
     })
+
+    it('should work with v-else', function (done) {
+      var vm = new Vue({
+        el: el,
+        template:
+          '<p v-show="ok">YES</p>' +
+          '<p v-else>NO</p>',
+        data: {
+          ok: true
+        }
+      })
+      expect(el.children[0].style.display).toBe('')
+      expect(el.children[1].style.display).toBe('none')
+      expect(transition.apply.calls.count()).toBe(2)
+      vm.ok = false
+      Vue.nextTick(function () {
+        expect(el.children[0].style.display).toBe('none')
+        expect(el.children[1].style.display).toBe('')
+        expect(transition.apply.calls.count()).toBe(4)
+        done()
+      })
+    })
   })
 }