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.

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

Using " in v-bind in HTML strips HTML tag #3001

Closed
nfplee opened this issue Jan 13, 2021 · 7 comments
Closed

Using " in v-bind in HTML strips HTML tag #3001

nfplee opened this issue Jan 13, 2021 · 7 comments
Labels
🔨 p3-minor-bug Priority 3: this fixes a bug, but is an edge case that only affects very specific usage. has workaround A workaround has been found to avoid the problem 🐞 bug Something isn't working

Comments

@nfplee
Copy link

nfplee commented Jan 13, 2021

Version

3.0.5

Reproduction link

https://jsfiddle.net/1v5mw7eL/

Steps to reproduce

Run the JSFiddle and see that the text is not bold.


Here's the same sample in Vue 2 (where the text is bold):

https://jsfiddle.net/r8kt362q/

@posva posva added 🐞 bug Something isn't working 🔨 p3-minor-bug Priority 3: this fixes a bug, but is an edge case that only affects very specific usage. has workaround A workaround has been found to avoid the problem labels Jan 13, 2021
@posva posva changed the title Model Bind Regression - Stripping HTML Using " in v-bind in HTML strips HTML tag Jan 13, 2021
@posva
Copy link
Member

posva commented Jan 13, 2021

You can use single quotes as a workaround:

<div id="app">
  <list :model="{
    widgets: [
      {
        name: 'Test',
        content: '<strong>Bold Text</strong>'      }
    ]
  }"></list>
</div>

@skirtles-code
Copy link
Contributor

This problem manifests itself in other ways too. e.g.:

<button v-if="a <b && b > 7">Click</button>

The missing space character after the < leads to it being treated as a tag inside decodeHtmlBrowser and compilation fails. Obviously it's trivial to workaround it in this case by adding a space.

I've made some further notes on #3002 about how we might fix this.

@skirtles-code
Copy link
Contributor

skirtles-code commented Mar 28, 2021

(Responding to a message that has since been deleted)

I don't think it is a separate problem, it's just another manifestation of the same bug in the decoder.

I believe the fix I proposed would work for both.

@edison1105
Copy link
Member

I don't think it is a separate problem, it's just another manifestation of the same bug in the decoder.

I believe the fix I proposed would work for both.

Oh, I was so sorry for misunderstood your point.

@nfplee
Copy link
Author

nfplee commented Apr 23, 2021

You can use single quotes as a workaround:

<div id="app">
  <list :model="{
    widgets: [
      {
        name: 'Test',
        content: '<strong>Bold Text</strong>'      }
    ]
  }"></list>
</div>

I have been using this workaround but I have noticed it's messing with my content. For example to allow attributes within the content I must also convert them to single quotes and escape them, see an example below:

https://jsfiddle.net/aq5mkjg9/

However now if I save my content it has replaced the quotes with single quotes. Not quite sure how I missed this beforehand. I could replace them back on the server before saving, however I'd have to do some clever parsing to make sure it's only the attributes I want replaced and not any single quotes that I may have used in the text (e.g. when saying "don't").

@edison1105 any idea when this pull request will go live?

@edison1105
Copy link
Member

@nfplee

any idea when this pull request will go live?

I also don't know.
If you are very anxious, maybe we can try to release a Knightly build version via https://github.com/knightly-bot

@nfplee
Copy link
Author

nfplee commented Apr 26, 2021

@nfplee

any idea when this pull request will go live?

I also don't know.
If you are very anxious, maybe we can try to release a Knightly build version via https://github.com/knightly-bot

Thanks but I've just patched this into a custom build. I was more interested in knowing when the pull request will be officially supported as it works well and I can't see any problems with it.

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
🔨 p3-minor-bug Priority 3: this fixes a bug, but is an edge case that only affects very specific usage. has workaround A workaround has been found to avoid the problem 🐞 bug Something isn't working
Projects
None yet
Development

Successfully merging a pull request may close this issue.

4 participants