<v-show> style.display is incorrect when reusing the elm

[casperdai]

Version

2.6.11

Reproduction link

https://jsfiddle.net/CasperDai/mred18vo/7/

Steps to reproduce

click 'change'

What is expected?

el.style.display is 'flex'

What is actually happening?

el.style.display is ''

[posva]

Use a key on the <div> as a workaround.

[scientistzjf]

Use a key on the <div> as a workaround. Excuse me, how should I operate?

[DannyFeliz]

@scientistzjf

It’s usually best to use key with v-if + v-else, if they are the same element type (e.g. both <div> elements).

By default, Vue updates the DOM as efficiently as possible. That means when switching between elements of the same type, it simply patches the existing element, rather than removing it and adding a new one in its place. This can have unintended consequences if these elements should not actually be considered the same.

Good

<div
  v-if="error"
  key="search-status"
>
  Error: {{ error }}
</div>
<div
  v-else
  key="search-results"
>
  {{ results }}
</div>

---

Bad

<div v-if="error">
  Error: {{ error }}
</div>
<div v-else>
  {{ results }}
</div>

[dineshrabara]

@scientistzjf

use key like below

<div id="app">
  <div>
    <div @click="click">change</div>
    <div v-if="state === 0">
      <div key='first-key' v-show="hasChildren">some data</div>
    </div>
    <div v-else>
      <div ref="t" key='second-key' style="display: flex;">display: {{ val }}</div>
    </div>
  </div>
</div>

[b8x]

Is any working solution??

[DaZuiZui]

Use a key on the div