Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

The template ref was not set to null correctly after the conditional rendering was updated #12898

Open
yinhangfeng opened this issue Feb 17, 2025 · 0 comments · May be fixed by #12900
Open

The template ref was not set to null correctly after the conditional rendering was updated #12898

yinhangfeng opened this issue Feb 17, 2025 · 0 comments · May be fixed by #12900
Labels
🔨 p3-minor-bug Priority 3: this fixes a bug, but is an edge case that only affects very specific usage.

Comments

@yinhangfeng
Copy link

yinhangfeng commented Feb 17, 2025

Vue version

3.5.13

Link to minimal reproduction

https://play.vuejs.org/#eNp9Ustu2zAQ/JUtD5EMCDJStxfXCdAWObRAH0h9q4KAkFYyE4oUSEpxYOjfs6QkWwmSXGxxZ2Z39nFgX5sm7Vpka7axuRGNA4uubS4zJepGGwcH2CVgsExAq1+6VQ6LBAoshcLvmigKlUtA4d5tRX4PPZRG1xBRzihTmcq1sg62SD8XL2XxIVMw1IsXEB4Ag6CUvCIB1Y2daXHxZQ6ixJrk11iOFA8PhKPHmNtHlQPlvbicUkNIm3ZctkjKkkuLY2IA/sCFO/YRUg6Ar6klplJX8anykGVi9ScHhtox6mXhMfp/ej+zcnYGuzgqRBclNG5qaD1vsU/AY+fRIjmpP7wlH9kfZ+ybyWT47yke7G6Ww8Jp1fRwWDeSO6QXwCbsa0nfm+UMYAlzlsZRiiq9s1rR0YQGM5bTSoVE86dxgsaVsfXUesa4lPrhZ4j5VY62SLPD/P6V+J3d+1jG/hq0aDrM2BFz3FToBvjq329a1gysddFKYr8DXiOtsvUeB9q3VhVke8YLbn+E0xeq2tqrvUNlp6a80WmInk1X7q/5rdZPdlfpp6Cj2dMUbzs0PicNcJV+Ts9XrH8CvcIf9Q==

Steps to reproduce

<script setup>
import { h, ref, onMounted, defineComponent, nextTick } from 'vue'

const Test = defineComponent({
  setup() {
    const flag = ref(true);
    const elementRef = ref();

    onMounted(async () => {
      flag.value = false;
      await nextTick();
      console.log(elementRef.value);
    });

    return () => {
      return [
        flag.value && h('div', { ref: elementRef }, 'div1'),
        !flag.value && h('div', {}, 'div2'),
      ];
    };
  },
});
</script>

<template>
  <Test />
</template>

What is expected?

The final value of elementRef is null

What is actually happening?

The final value of elementRef is div2

System Info

System:
    OS: macOS 14.6
    CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
    Memory: 3.62 GB / 32.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.16.0 - ~/.nvm/versions/node/v20.16.0/bin/node
    Yarn: 1.22.22 - ~/.nvm/versions/node/v20.16.0/bin/yarn
    npm: 10.8.3 - ~/.nvm/versions/node/v20.16.0/bin/npm
    pnpm: 9.15.5 - ~/.nvm/versions/node/v20.16.0/bin/pnpm
  Browsers:
    Chrome: 133.0.6943.55
    Edge: 133.0.3065.69
    Safari: 17.6

Any additional comments?

No response

@edison1105 edison1105 added the 🔨 p3-minor-bug Priority 3: this fixes a bug, but is an edge case that only affects very specific usage. label Feb 17, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
🔨 p3-minor-bug Priority 3: this fixes a bug, but is an edge case that only affects very specific usage.
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants