Skip to content

patchStyle have some problem #5772

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

Closed
btea opened this issue Apr 21, 2022 · 4 comments
Closed

patchStyle have some problem #5772

btea opened this issue Apr 21, 2022 · 4 comments

Comments

@btea
Copy link
Contributor

btea commented Apr 21, 2022

Version

3.2.33

Reproduction link

sfc.vuejs.org/

Steps to reproduce

1、click the move button, tThe left value of the first div tag will increase by 10 to 20.
2、click the add button, will add a div tag with content b.

What is expected?

The left value of the first label should still be 20px.

What is actually happening?

The left value of the first label becomes 10px.

Any additional comments?

I tried to debug the code and created another link.

When I click the change button, the code runs to patchStyle and I find that the values ​​of prev and next are the same, which I think doesn't seem right.
image

@Justineo
Copy link
Member

It's working as expected because you were updating the DOM directly, bypassing Vue's component state.

See the fix here.

@btea
Copy link
Contributor Author

btea commented Apr 21, 2022

Yes, I have solved it like this at the moment, but in vue2 the appearance is as I expected. this is a link.

@edison1105 edison1105 reopened this Apr 22, 2022
@edison1105 edison1105 reopened this Apr 22, 2022
@LinusBorg LinusBorg added the 🍰 p2-nice-to-have Priority 2: this is not breaking anything but nice to have it addressed. label Apr 22, 2022
@edison1105
Copy link
Member

@LinusBorg
maybe this should be considered a bug, as it is inconsistent with vue2.🤔

@posva
Copy link
Member

posva commented Apr 22, 2022

This is working as expected because you are setting :style="{left: item.left}" so the style is set to the correct value when adding a new value. It would be a bug if it behaved differently.

In any case, you are not supposed to directly manipulate the DOM that is being handled by Vue.

@posva posva closed this as completed Apr 22, 2022
@posva posva removed the 🍰 p2-nice-to-have Priority 2: this is not breaking anything but nice to have it addressed. label Apr 22, 2022
@github-actions github-actions bot locked and limited conversation to collaborators Sep 15, 2023
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.

5 participants