Vue: 不间断空格与其他字符的行为不同-通过道具传递时在模板中输出“”

创建于 2018-10-04  ·  11评论  ·  资料来源: vuejs/vue

2.5.17

复制链接

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

重现步骤

  1. 创建一个接受字符串道具的新组件。
  2. 在组件模板中显示道具。
  3. 在Vue应用程序中使用组件,并为道具传递包含不间断空格字符的字符串。

期望什么?

输出应包含不间断空格

实际发生了什么?

输出显示 


在提供的示例中,我提出了3个案例

  • 第一种情况是 变成了 
  • 第二种情况是,在一长串UTF-8字符中,只有NON-BREAKING SPACE被转义。
  • 第三,当获得相同的字符列表但从带有document.querySelector('#test').title的常规HTMLElement检索字符时,字符无法逃脱。

注意:复制不间断空格字符时,它可能会在剪贴板中变成常规空格。 因此,请使用https://en.wikipedia.org/wiki/Non-breaking_space#Keyboard_entry_methods确定如何插入字符。

最有用的评论

解决方法是,尝试将JS转义代码放入  - \xa0

这里找到的,在nonbreakinspacification功能中为我工作

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

此函数返回的字符串使用&nbsp s代替空格呈现。

所有11条评论

我添加了一个新示例-在html实体列表(包括其他空格和零宽度字符)中-仅 未解码。

我还注意到在mathiasbynens /他中有两个条目为 一个不包含simicolon,一个不包含simicolon。

可能是在黑暗中开枪,但这会对以上结果有影响吗?

我尝试使用mathiasbynens / he v1.1.1查找与 任何不一致之处,但是却找不到任何不一致之处。

我尝试复制以前的jsfiddles,以查看 是否会有不同的反应。

如果有人可以给我一些指示,以查找该错误,那么我很乐意为您提供帮助。

我也非常感谢您对此问题的任何回应。

对我来说似乎是个错误-修复会很好

Ive有时注意到×问题。 例如,组件prop的默认值为× ,它在组件(v-html)中呈现。 渲染时,它会显示实际的x字符并导致SSR水化保释。

其他示例: https :

是的-它似乎与Vue一般解析html属性的方式有关。

我已经基于@approached例子做了一个类似的例子
https://jsfiddle.net/onbzk0m6/3/

解决方法是,尝试将JS转义代码放入  - \xa0

这里找到的,在nonbreakinspacification功能中为我工作

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

此函数返回的字符串使用&nbsp s代替空格呈现。

我偶然发现了一个相同的问题:当在模板中使用html实体而不是软连字符时,html实体会以“”作为文本。 对于“”和其他人也一样。
Vue 2.6.10

对于正在寻找解决方法的人们:
当传递带有不间断空格的字符串作为道具时,我只是将空格替换为不太可能成为字符串一部分的字符,在我的情况下为'zzz'
var newName = program_name.replace(/\s/g,'zzz');

然后,在需要显示或使用此道具的实际组件中,我有一个计算功能,可以撤消上述操作,并再次用空格替换占位符char

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

@posva抱歉给您带来麻烦,我找到了此问题的解决方案。

修复之后,Vue的行为将与HTML相同,就像下面的屏幕截图所示,

我可以解决这个问题并提出请求吗?

image

image

当然@JuniorTour

此问题可能与https://github.com/vuejs/vue/issues/10485https://github.com/vuejs/vue/issues/11059有关
因此,值得一看的是现有的PR

此页面是否有帮助?
0 / 5 - 0 等级