Vue: Non-breaking space acts different than other characters - outputs " " in template when passed via props

Created on 4 Oct 2018 · 11Comments · Source: vuejs/vue

Version

2.5.17

Reproduction link

https://codepen.io/avertes/pen/LYYpNRe
https://jsfiddle.net/50wL7mdz/756973/

Steps to reproduce

Create a new component that accepts a string prop.
Display the prop within the component's template.
Use the component in a Vue application and pass a string containing a non-breaking space character for the prop.

What is expected?

The output should contain a non breaking space

What is actually happening?

The output shows  

In the example provided I've made 3 cases

First case is that   get turned into  
Second case is that in a long list of UTF-8 characters only NON-BREAKING SPACE is escaped.
And third when getting the same list of characters, but retrieving it from a regular HTMLElement with document.querySelector('#test').title the character aren't escape.

Note: When copying the non-breaking space character it might turn into a regular space in the clipboard. Therefor use https://en.wikipedia.org/wiki/Non-breaking_space#Keyboard_entry_methods to make sure how to insert the character.

bug

Source

Eibx

👍1

Most helpful comment

as a workaround, try to put the JS escape code for   - \xa0

found here, worked for me in nonbreakinspacification function

    public static noBreakingSpaces(str: string): string {
        return str.replace(' ', '\xa0');
    }

strings returned by this function are being rendered with &nbsps instead of spaces.

grreeenn on 21 Oct 2019

👍8

All 11 comments

I've added a new example - where in a list of html entities (including other whitespace and zero width characters) - only   not decoded.

https://jsfiddle.net/50wL7mdz/765399/

Also I've noticed that in mathiasbynens/he there are two entries for   one without simicolon and one with simicolon.

https://github.com/mathiasbynens/he/blob/master/data/entities.json#L1470

Might be a shot in the dark, but could this have any influence on the result above?

Eibx on 17 Oct 2018

I've tried using mathiasbynens/he v1.1.1 to find any inconsistencies with  , but haven't been able to find any.

I've tried duplicating my previous jsfiddles, to see if   would react any different.

https://jsfiddle.net/ebpcx1do/3/

If anyone can give me some pointers for where to look for this error, I'm more than happy to give it a shot.

I would also very much appreciate any response on issue.

Eibx on 29 Oct 2018

Looks like a bug to me - a fix would be nice

rosrosros on 30 Oct 2018

Ive noticed issues with × on occasion. say a component prop has a default of ×, which is rendered in the component (v-html). When rendering it shows the actual x character and causes an SSR hydration bail.

tmorehouse on 2 Nov 2018

Other example: https://jsfiddle.net/onbzk0m6/ (character )

approached on 23 Nov 2018

Yeah - it does seem to be related the way Vue parses html attributes in general.

I've made a similar example based of @approached example
https://jsfiddle.net/onbzk0m6/3/

Eibx on 23 Nov 2018

👍3

as a workaround, try to put the JS escape code for   - \xa0

found here, worked for me in nonbreakinspacification function

    public static noBreakingSpaces(str: string): string {
        return str.replace(' ', '\xa0');
    }

strings returned by this function are being rendered with &nbsps instead of spaces.

grreeenn on 21 Oct 2019

👍8

I stumbled upon the same issue: The html entity results in"" as text when used in templates instead of the soft hyphen. The same for "" and others.
Vue 2.6.10

styxxx on 24 Feb 2020

for folks that are looking for a workaround for this:
When passing a string with non-breaking spaces as a prop, I just replaced the spaces with characters unlikely to be part of the string, in my case 'zzz'
var newName = program_name.replace(/\s/g,'zzz');

Then, in the actual component where I need to display or use this prop, I have a computed function that undoes the above action and replaces the placeholder chars with spaces again

correctedProgramName(){ //this reverses the space-replacing we had to do in reporting-dashboard.js
        let correctedProgramName = this.program_name.replace(/zzz/g, ' ')
        return correctedProgramName
      }