Vue: v-html can not reselect content when content change!
Version
2.5.2
Reproduction link
https://jsfiddle.net/weituotian/0rc7zq1b/5/
Steps to reproduce
- select
h11111111111111111 - click
rerenderbutton - then you can see the selected can not be reselected
What is expected?
I hope I can update incrementally so that my html content can be selected back to the previous selection.
What is actually happening?
If the html changes, then the window.getSelection().addRange can not choose to go back to the previous content.
weituotian
All 6 comments
Hi, thanks for your interest but Github issues are for bug reports and feature requests only. You can ask questions on the forum, the Discord server, gitter or StackOverflow.
You need to set the selection again since Vue is replacing the HTML
posva
on 5 Jul 2018
@posva
why close my issue!
it is not solve!
your solution is not work! you don konw the meaning of this issue!
weituotian
on 5 Jul 2018
My bad, it doesn't work! I updated my comment to better reflect why I closed the issue :wink:
posva
on 5 Jul 2018
@posva
If your technique is very powerful, give me some advice.
it is because vue update the html, and there is impossible to reselect the previous selection!!!
Vue should be responsible for the issue after updating the dom element!
not only v-html, every component which been updated by vue also hava a reselect issue!
now you understand the real meaning of this issue???
weituotian
on 6 Jul 2018
Calm down plz.
it is because vue update the html, and there is impossible to reselect the previous selection!!!
Of course you can, you just need to decide how to record previous selections yourself, even with v-html.
Vue should be responsible for the issue after updating the dom element!
Absolutely not. By using v-html like this you are explicitly re-rendering all existing content, that's why the selections are discarded. If you are just appending content, just try to keep previous content as much as possible and the selection will be preserved.
You can check on this: http://jsfiddle.net/eywraw8t/143042/
And btw, don't take free help for granted.
Justineo
on 6 Jul 2018
@Justineo The example may be written in error, It should be so
this.contents.push(Math.floor(Math.random() * 3))
AfterThreeYears
on 7 Jul 2018
Related issues
gkiely
·
3Comments
franciscolourenco
·
3Comments
loki0609
·
3Comments
finico
·
3Comments
guan6
·
3Comments
Most helpful comment
Calm down plz.
Of course you can, you just need to decide how to record previous selections yourself, even with
v-html.Absolutely not. By using
v-htmllike this you are explicitly re-rendering all existing content, that's why the selections are discarded. If you are just appending content, just try to keep previous content as much as possible and the selection will be preserved.You can check on this: http://jsfiddle.net/eywraw8t/143042/
And btw, don't take free help for granted.