Using v-show to render different modules, rendering problems occur when specifying width percentages

[Mrswangp]

Vue version

vue-version: v3.2.13 @vue/cli: v5.0.8

Link to minimal reproduction

https://stackblitz.com/edit/vitejs-vite-shvm1fd7?file=package.json,src%2FApp.vue,src%2Fmain.js&terminal=dev

Steps to reproduce

1. Open the reproduction link and run the demo
2. Select the selector option to option2 and the different module display

What is expected?

1.Select the option2,then the ModuleD and ModuleE shuold like the ModuleA normally display

What is actually happening?

1.Select the option2,then the ModuleD and ModuleE abnormally display

System Info

System:
    OS: Linux 3.10 CentOS Linux 7 (Core)
    CPU: (4) x64 Intel(R) Core(TM) i7-9700 CPU @ 3.00GHz
    Memory: 66.20 MB / 1.78 GB
    Container: Yes
    Shell: 4.2.46 - /bin/bash
  Binaries:
    Node: 16.20.2 - /run/user/1000/fnm_multishells/4906_1736908128865/bin/node
    npm: 8.19.4 - /run/user/1000/fnm_multishells/4906_1736908128865/bin/npm
  Browsers:
    Chrome: 124.0.6367.118
  npmPackages:
    vue: ^3.2.13 => 3.5.13

Any additional comments?

1.In the style code area, I commented on the different display results caused by setting different width methods.
2.In my opinion, regardless of whether the width setting is a percentage or a fixed value, under the conditional rendering of v-show, the width or aspect ratio in the initial state should not be lost.

[edison1105]

I don't think this is a core bug. You should manually call resize() when the hidden chart shows.

let vwdc = null  

function testclick(para) {
  //...
  nextTick(()=>{
    if(vwdc) vwdc.resize()
  })
}

//...
vwdc = echarts.init(wdc.value);
//...

[Mrswangp]

Yes,may you said is coorrect,but the ModuleE display is still dbnormally when as you provide the way
The display result is

Code snippets involving changes

@edison1105
@vuejs

[Wei-Ba]

Yes,may you said is coorrect,but the ModuleE display is still dbnormally when as you provide the way是的，你所说的正确，但按照你提供的方法，ModuleE 的显示仍然异常 The display result is显示结果是 Code snippets involving changes涉及更改的代码片段 @edison1105 @vuejs

emmm，看了你的代码，你没引入nextTick

[Mrswangp]

From the definition of V-show given on the official website:
v-show: It controls the display and hiding of elements by switching the CSS display property of elements. When v-show is true, the element will be displayed; when it is false, the element will be hidden, but the DOM structure will not change and the element will still remain on the page.
So when the initial default value of V-show is false, it should not lose the width or aspect ratio of the initial state. Otherwise, it does not conform to its definition.

[Mrswangp]

Yes,may you said is coorrect,but the ModuleE display is still dbnormally when as you provide the way是的，你所说的正确，但按照你提供的方法，ModuleE 的显示仍然异常 The display result is显示结果是 Code snippets involving changes涉及更改的代码片段 @edison1105 @vuejs

emmm，看了你的代码，你没引入nextTick

Thanks. This indeed needs to be imported for it to work. At that time, this web compiler did not report an error.