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.

Sign up for GitHub

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

Jump to bottom

v-html gets completely refreshed rather than patched when being re-rendered #4247

Closed
Philipp-M opened this issue Nov 18, 2016 · 4 comments
Closed

v-html gets completely refreshed rather than patched when being re-rendered #4247

Philipp-M opened this issue Nov 18, 2016 · 4 comments

Comments

@Philipp-M
Copy link

Vue.js version

2.0.7

Reproduction Link

http://jsfiddle.net/v4f2typt/

Steps to reproduce

just look at the moving 'some html', the animation should run for 4 seconds, also check the element tab in the developer tools, where it is visible that the elements representing the v-html are changed

What is Expected?

the animation will complete, and the DOM element doesn't get reinserted

What is actually happening?

I guess, that the html in v-html gets removed and reinserted once the style has changed
@defcc defcc changed the title v-html gets completely refreshed if the parent element has a computed style v-html gets completely refreshed rather than patched when being re-rendered Nov 18, 2016
@defcc
Copy link
Member

defcc commented Nov 18, 2016

It's not just because computed style change. When the data changed, vue will rerender your app according to some strategies.

Maybe we could apply diff to the nodes generated by the v-html rather than reset it.

@defcc defcc added the 2.0 label Nov 18, 2016
@yyx990803
Copy link
Member

yyx990803 commented Nov 18, 2016 •
edited

This is expected: v-html is an alias for innerHTML. If you want patch behavior, you have to write your markup in Vue templates. This is a wontfix imo. v-html is already an escape hatch and you should only use it when you absolute have to. Patching the content involves way too many edge cases for very little gain, if any.

@yyx990803 yyx990803 reopened this Nov 18, 2016
@yyx990803
Copy link
Member

Actually, in this case it should not be overwritten - we should cache the previous innerHTML and avoid setting it again if it stays the same.

@defcc
Copy link
Member

defcc commented Nov 18, 2016

We could check the oldProp value with the new one here. https://github.com/vuejs/vue/blob/dev/src/platforms/web/runtime/modules/dom-props.js#L23. I'll make a patch.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@yyx990803 @defcc @Philipp-M