Version

3.2.24

Reproduction link

codesandbox.io

Steps to reproduce

• Create a component with a named slot
• Use the component with v-if v-else on the named template
• on the if and else add 2 different SVG (inline < svg >...</ svg >)
• when the state changes the first time it works
• when you change again the state it doesn't work (it keep displaying the old svg but other part of the component like text is displayed correctly)

I put this example in the codesandbox example (see HelloWorld.vue)

1 - you will see (+) svg 2 - click first time (it will change to check mark) 3 - click again the text changes but not the svg !

What is expected?

render the correct svg if state changes (the 2nd and 3rd time etc...)

What is actually happening?

the svg state doesn't change (it displays the wrong svg of the old state forever) but the text changes correctly

We have a big application that we are trying to upgrade to vue 3. We got this warning and error on our app ( the code was working fine in vue 2)

Warning : Unhandled error during execution of scheduler flush. This is likely a Vue internals bug. Error : Uncaught (in promise) TypeError: right-hand side of 'in' should be an object, got null (shouldSetAsProp, patchProp, patchProps , patchElement , processElement ,patch, patchKeyedChildren, patchChildren)

in the example of codesandbox I provided couldn't really reproduce the error but it still doesn't work as expected

Workaround: Move the condition into the slot:

<template #content>
  <template v-if="stateBool">
    <svg>.....
    <div> ....  
  </template>
  <template v-else>
    <svg>.....
    <div> ....
  </template>
</template>

thank you for your quick reply,

if anyone else have the same problem and interested in a different workaround this worked me :

Simply put the inline svg in a separate component and import it

<template>
    < svg  >
    ...
    </ svg >
</template>

<script>
export default {
    name: "AddSvg"
};
</script>