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

Bug KeepAlive and Transition: Changing a child component in KeepAlive before the component is unmount will cause an error #6835

Closed
LittleSound opened this issue Oct 8, 2022 · 7 comments · Fixed by #6839

Comments

@LittleSound
Copy link

LittleSound commented Oct 8, 2022

Vue version

>= v3.2.27

Link to minimal reproduction

Vue SFC Playground

Steps to reproduce

  1. Click Comp2
  2. Click Change Enabled

What is expected?

No errors

What is actually happening?

The first time I encountered this error was in the following code. After switched pages, the actual data in route.query would disappear when the beforeUnmount lifecycle takes place which caused the v-if in KeepAlive to be triggered where it will result in the error "The routing process was interrupted and the page crashed" eventually.

I don't have a way to use vue-router in Playground, so I chose to reproduce the bug by manually changing the variables when appropriate.

<script setup lang="ts">
const route = useRoute()
const formModel = computed<any>(() => route.query['model'])
</script>

<template>
  <Transition name="fade" mode="out-in">
    <KeepAlive>
      <AForm v-if="formModel === '1'" />
      <BForm v-else />
    </KeepAlive>
  </Transition>
</template>

System Info

No response

Any additional comments?

No response

@baiwusanyu-c
Copy link
Contributor

try this ?

<KeepAlive>
	<Transition name="fade" mode="out-in">
      		<Comp1 v-if="model === 1" />
      		<Comp2 v-else />
	</Transition>
    </KeepAlive>

@LittleSound
Copy link
Author

Thanks, the change does work!
But I don't know if this will cause other problems by not following the API documentation.

I'm just following the usage taught in the documentation:

Api: KeepAlive

image

@baiwusanyu-c
Copy link
Contributor

Thanks, the change does work! But I don't know if this will cause other problems by not following the API documentation.

I'm just following the usage taught in the documentation:

Api: KeepAlive

image

You can try the <component/> instead of using v-if

@LittleSound
Copy link
Author

You can try the <component/> instead of using v-if

Thank you very much. This does work and follows the documentation, I will try to use this in my project to fix the error. But what happens when using v-if v-else does seem to be a bug.

@LittleSound
Copy link
Author

You can try the <component/> instead of using v-if

Thank you very much. This does work and follows the documentation, I will try to use this in my project to fix the error. But what happens when using v-if v-else does seem to be a bug.

Maybe I'm wrong, and I'm getting this error with <component /> as well, here's a recurrence of using <component />: Vue SFC Playground

@zhangzhonghe
Copy link
Member

try this ?

<KeepAlive>
	<Transition name="fade" mode="out-in">
      		<Comp1 v-if="model === 1" />
      		<Comp2 v-else />
	</Transition>
    </KeepAlive>

This will make keepAlive not work.

@baiwusanyu-c
Copy link
Contributor

try this ?

<KeepAlive>
	<Transition name="fade" mode="out-in">
      		<Comp1 v-if="model === 1" />
      		<Comp2 v-else />
	</Transition>
    </KeepAlive>

This will make keepAlive not work.

you are right.maybe it is a bug

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging a pull request may close this issue.

4 participants