Subscribe on changes!

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

avatar
Sep 28th 2023

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

avatar
Sep 28th 2023

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.

avatar
Sep 29th 2023

similar to #9200