Thunberg087 / vue-fragment

a very candide fragment component for Vue.js
http://jsfiddle.net/cdkn5wL3/
670 stars 51 forks source link

NotFoundError: Node was not found in removeChild. #34

Open douglasg14b opened 4 years ago

douglasg14b commented 4 years ago

I'm using a fragment with a slot, which seems to be the cause? The above error occurs every time I change router views while the below component is the root element for the routes component.

    <fragment>
        <v-expand-transition v-if="initSteps === 0" leave-absolute>
            <v-progress-linear v-show="showProgress" class="z-index-100" indeterminate absolute top></v-progress-linear>
        </v-expand-transition>
        <v-expand-transition v-else leave-absolute>
            <v-progress-linear v-show="showProgress" stream class="z-index-100" absolute top :value="initProgress"></v-progress-linear>
        </v-expand-transition>

        <slot></slot>

        <v-overlay :dark="false" absolute opacity="0.75" color="grey lighten-3" :value="showProgress" v-if="initSteps == 0">
        </v-overlay>
        <v-overlay :dark="false" absolute v-else opacity="0.5" color="grey lighten-3" :value="showProgress">
        </v-overlay>
    </fragment>
Planck-Ho commented 4 years ago

I also met

xiongxt commented 4 years ago

I also met

douglasg14b commented 4 years ago

?

tobias-kuendig commented 4 years ago

Try to use v-show instead of v-if on the root elements. Maybe this helps.

constgen commented 4 years ago

My solution was to use a render function. I converted this

<template>
  <Fragment v-if="matches">
    <slot></slot>
  </Fragment>
</template>

to this

 render(createElement) {
    let { $slots, matches } = this;
    let children = matches ? $slots.default : undefined;

    return createElement(Fragment, {}, children);
  }

And now it works without problems

Tofandel commented 4 years ago

Congrats you just converted

<template>
  <Fragment v-if="matches">
    <slot></slot>
  </Fragment>
</template>

To

<template>
  <Fragment>
    <slot v-if="matches"></slot>
  </Fragment>
</template>
constgen commented 4 years ago

You are absolutely right