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

Using slot content with v-if and same DOM elements lead to patching error #9308

Closed
jleifeld opened this issue Sep 28, 2023 · 3 comments
Closed
Labels
🐞 bug Something isn't working scope: slots

Comments

@jleifeld
Copy link

Vue version

3.3.4

Link to minimal reproduction

https://stackblitz.com/edit/vue-mbuqlf?file=src%2FApp.vue

Steps to reproduce

  1. Create a child element with the following template:
<template>
  <div class="hello">
    <slot name="example">
      <h2 v-if="true">Before</h2>
    </slot>
  </div>
</template>
  1. Create a parent component with the following code:
<template>
  <div id="app">
    <HelloWorld>
      <template #example>
        <h2 v-if="loaded">
          <!-- content needs to access a variable -->
          <span>After {{ foobar }}</span>
        </h2>
      </template>
    </HelloWorld>
    {{ loaded }}
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue';

export default {
  name: 'App',
  components: {
    HelloWorld,
  },
  data() {
    return {
      loaded: false,
      foobar: 123,
    };
  },
  mounted() {
    window.setTimeout(() => {
      console.log('LOADED CHANGED');
      this.loaded = true;
    }, 3000);
  },
};
</script>

What is expected?

After 3 seconds the slot content gets replaced with After 123.

What is actually happening?

A error gets thrown and the default slot content gets rendered:
Bildschirmfoto 2023-09-28 um 09 04 41

System Info

No response

Any additional comments?

No response

@jleifeld
Copy link
Author

If anyone else have this issue and need a hack to solve this problem you can use <div style="display: none;"></div> inside the slot. Then it works again.

@baiwusanyu-c baiwusanyu-c self-assigned this Sep 28, 2023
@edison1105
Copy link
Member

similar to #9200

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
🐞 bug Something isn't working scope: slots
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants