node with v-show inside v-if is reused in the adjacent v-else #4484

Closed
dolymood opened this Issue Dec 15, 2016 · 2 comments

Projects

None yet

3 participants

@dolymood

Vue.js version

2.1.6

Reproduction Link

http://codepen.io/dolymood/pen/gLQmwy

Steps to reproduce

Code

<div class="el el-if" v-if="bln"><span v-show="false">hidden content</span></div>
<div class="el el-else" v-else><span @click="toggle">visible  content</span></div>
  1. bln=true, the span element in el-if is hidden

  2. bln=false, the span element in el-else is hidden

What is Expected?

When bln=false, the span element should be visible

What is actually happening?

patchVnode will check the nodes is same:

function sameVnode (vnode1, vnode2) {
  return (
    vnode1.key === vnode2.key &&
    vnode1.tag === vnode2.tag &&
    vnode1.isComment === vnode2.isComment &&
    !vnode1.data === !vnode2.data
  )
}

Because the old vnode vnode1.data is

{
  directives: [{
     def: {bind: fn, update: fn}
     expression: "false"
     modifiers: {},
     name: "show",
     rawName: "v-show",
     value: false
  }]
}

and the new vnode vnode2.data is

{
  on: {click: fn}
}

So sameVnode(span1, span2) result is true, but updateDirectives will be call v-show directive's unbind hook function.

If the span elements have different key attributes, the result will be correct. But i think it will be better if:

When bln=false, the span element should be visible

@posva posva added 2.1 bug labels Dec 15, 2016
@posva posva changed the title from `v-show` directive should have `unbind` hook to reset element's display style value? to node with v-show inside v-if is reused in the adjacent v-else Dec 15, 2016
@defcc
Member
defcc commented Dec 15, 2016

Thanks, I'm looking into it.

@defcc defcc self-assigned this Dec 15, 2016
@yyx990803 yyx990803 closed this in a977642 Dec 21, 2016
@dolymood

👍 Thanks

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment