View isn't updated in a weird case (combination of many factors, transition, injection & computed)

[07akioni]

Version

3.0.4

Reproduction link

https://codesandbox.io/s/lucid-wind-c4jky?file=/src/components/OuterWrapper.vue

Steps to reproduce

follow the link.

Although the case seems not that 'minimal', I can't figure out a smaller one. Any small change may make the demo work as expected.

What is expected?

After the button is clicked, it should disappeared.

What is actually happening?

It stays there.

[luwuer]

Repetitive description.

And its really complicated.

[07akioni]

Repetitive description.

And its really complicated.

repetitive desc is removed

[edison1105]

I debugged this bug locally, but found it works. My local code is the latest master. so I think it's fixed by some commits.
see demo: https://codesandbox.io/s/nervous-raman-2776d?file=/index.html

[07akioni]

I debugged this bug locally, but found it works. My local code is the latest master. so I think it's fixed by some commits.
see demo: https://codesandbox.io/s/nervous-raman-2776d?file=/index.html

It works before 3.0.2, fails in 3.0.3 & 3.0.4.

So maybe finding the reason is crucial to make it not regress again. Since nested slots may trigger some subtle bugs.

[posva]

Thanks a lot @edison1105 !

[edison1105]

@posva I think it is worth to add a test case make it not regress again.Although I haven't found the specific reason.

[posva]

yeah, PR welcome for a non regression test!

[edison1105]

yeah, PR welcome for a non regression test!

OK, I will try it later.

[edison1105]

@posva
I am sorry, When writing test cases, I found that there was a problem with my demo above, and I updated the code again.Latest demo: https://codesandbox.io/s/nervous-raman-2776d?file=/index.html
This bug still exists.Maybe we should reopen this issues.
I apologize for my mistake.

It works before 3.0.2, fails in 3.0.3 & 3.0.4.

@07akioni You are right, I tested it.

When I remove the Test component it works fine.

    const OuterWrapper = defineComponent({
      template: "#outer",
      name: "OuterWrapper",
      components: {
        // Test,
        InnerWrapper
      },
     ...
	})

[07akioni]

@posva
I am sorry, When writing test cases, I found that there was a problem with my demo above, and I updated the code again.Latest demo: https://codesandbox.io/s/nervous-raman-2776d?file=/index.html
This bug still exists.Maybe we should reopen this issues.
I apologize for my mistake.

It works before 3.0.2, fails in 3.0.3 & 3.0.4.

@07akioni You are right, I tested it.

When I remove the Test component it works fine.

    const OuterWrapper = defineComponent({
      template: "#outer",
      name: "OuterWrapper",
      components: {
        // Test,
        InnerWrapper
      },
     ...
	})

Yep, there are many ways to make it work such as remove transition, remove some computed, etc.

[Mr14huashao]

@07akioni
:show=“show” Can you tell me what this means? What's the effect?
I tried to change it to v-show=“show” and it responded normally.
The v-if="show" can also respond.
Whether the problem is caused by props value transfer or data binding is not determined.

[07akioni]

@07akioni
:show=“show” Can you tell me what this means? What's the effect?
I tried to change it to v-show=“show” and it responded normally.
The v-if="show" can also respond.
Whether the problem is caused by props value transfer or data binding is not determined.

The case is extract from a real component.

<date-picker>
  <position-binder>
    <input>
      <suffix :show="xxx'>

<suffix>
  <clear-button ... />
  <chevron ... />
  <loading ... />

[edison1105]

@07akioni
I debuged this and found the reason.caused by af95604
I opened a PR,maybe close #2829 too.
I don’t have time to test #2829,I need to sleep 😄

[HcySunYang]

Great thanks for @edison1105 's PR, but that still has shortcomings. I have written enough for the details, check out: #3184