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

$slots/useSlots reactivity breaks if same component with different content #6202

Closed
Akryum opened this issue Jun 29, 2022 · 7 comments
Closed

Comments

@Akryum
Copy link
Member

Akryum commented Jun 29, 2022

Vue version

3.2.37 | @8edf4b3

Link to minimal reproduction

Repro 1
Repro 2

Steps to reproduce

Changing reactively the template for a slot with the same child component but with different content breaks reactivity of useSlots/$slots/setup context slots:

<script setup>
import { ref } from 'vue'
import Comp from './Comp.vue'
import Comp3 from './Comp3.vue'

const data = ref(0)
setInterval(() => {
  data.value++
}, 1000)
</script>

<template>
  <h1>{{ data }}</h1>
  <!-- BUG? Doesn't update properly -->
  <Comp3>
    <template v-if="data % 2 === 0" #actions>
      <Comp>
        <template #foo>
            {{ data }}
        </template>
      </Comp>
    </template>
    <template v-else #actions>
      <Comp>
        <template #foo>
        </template>
      </Comp>
    </template>
  </Comp3>
</template>

What is expected?

The computed calling slots.foo should be re-evaluated when the content changes.

What is actually happening?

It's not updated and the computed value is stuck.

System Info

No response

Any additional comments?

Related: Slots improvements RFC

@jmaloon
Copy link

jmaloon commented Jun 29, 2022

Commenting because we've come across a similar issue/bug since upgrading from 3.2.33 => 3.2.37

@GrapevineLin
Copy link

GrapevineLin commented Jun 30, 2022

due to the diff algorithm, you should add unique keys to differentiate these two <Comp>

<Comp3>
    <template v-if="data % 2 === 0" #actions>
      <Comp key="1">
        <template #foo>
            {{ data }}
        </template>
      </Comp>
    </template>
    <template v-else #actions>
      <Comp key="2">
        <template #foo>
        </template>
      </Comp>
    </template>
  </Comp3>

@Akryum
Copy link
Member Author

Akryum commented Jun 30, 2022

Having different content should work without having to use keys.

@Akryum
Copy link
Member Author

Akryum commented Jul 13, 2022

Here is a better example.

@shigma
Copy link
Contributor

shigma commented Sep 2, 2022

Glad to see this closed, but the fix 00036bb seems to break vuepress build. After downgrading vue version to 3.2.37, the error disappeared. Does this change affect template syntax?

@Akryum Akryum reopened this Sep 30, 2022
@Akryum
Copy link
Member Author

Akryum commented Sep 30, 2022

Repro 1 is not resolved by the fix

@yyx990803
Copy link
Member

yyx990803 commented Oct 14, 2022

Repro 1's root cause is that slots isn't reactive, similar to attrs.

Workaround example using a manual ref for fooSlot and update it in onBeforeUpdate (see Comp.vue)

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

No branches or pull requests

5 participants