Vue: 改行しないスペースは、他の文字とは異なる動作をします-小道具を介して渡されると、テンプレートに「」を出力します

作成日 2018年10月04日  ·  11コメント  ·  ソース: vuejs/vue

バージョン

2.5.17

複製リンク

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

再現する手順

  1. 文字列propを受け入れる新しいコンポーネントを作成します。
  2. コンポーネントのテンプレート内に小道具を表示します。
  3. Vueアプリケーションでコンポーネントを使用し、小道具に改行なしのスペース文字を含む文字列を渡します。

何が期待されますか?

出力にはノーブレークスペースが含まれている必要があります

実際に何が起こっているのですか?

出力は 示しています


提供された例では、3つのケースを作成しました

  • 最初のケースは、   変わることです。
  • 2番目のケースは、UTF-8文字の長いリストでは、 NON-BREAKING SPACEがエスケープされることです。
  • そして3番目に、同じ文字リストを取得するが、通常のHTMLElementからdocument.querySelector('#test').titleて取得すると、文字はエスケープされません。

:改行しないスペース文字をコピーすると、クリップボード内で通常のスペースになる場合があります。 そのため、 https://en.wikipedia.org/wiki/Non-breaking_space#Keyboard_entry_methodsを使用して、文字の挿入方法を確認してください。

bug

最も参考になるコメント

回避策として、JSエスケープコードを  - \xa0

ここで見つかりまし

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

この関数によって返される文字列は、スペースではなく&nbspでレンダリングされています。

全てのコメント11件

新しい例を追加しました-htmlエンティティのリスト(他の空白文字とゼロ幅の文字を含む)-  がデコードされません。

また、 mathiasbynens / heには、  エントリが2つあり、1つはシミコロンなし、もう1つはシミコロンありであることに気付きました。

暗闇の中でのショットかもしれませんが、これは上記の結果に影響を与える可能性がありますか?

mathiasbynens / he v1.1.1を使用して、  との不整合を見つけようとしましたが、見つかりませんでした。

以前のjsfiddleを複製して、  が異なる反応をするかどうかを確認しました。

誰かが私にこのエラーを探す場所についてのいくつかの指針を与えることができれば、私はそれを試してみることができてうれしいです。

また、問題に対するご回答をいただければ幸いです。

私にはバグのように見えます-修正があればいいのですが

×に時々気づきました。 たとえば、コンポーネントの小道具のデフォルトは× 、これはコンポーネント(v-html)でレンダリングされます。 レンダリングすると、実際のx文字が表示され、SSRハイドレーションベイルが発生します。

その他の例: https

ええ-それは一般的にVueがhtml属性を解析する方法に関連しているようです。

@approachedの例に基づいて同様の例を作成しました
https://jsfiddle.net/onbzk0m6/3/

回避策として、JSエスケープコードを  - \xa0

ここで見つかりまし

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

この関数によって返される文字列は、スペースではなく&nbspでレンダリングされています。

私は同じ問題に遭遇しました:ソフトハイフンの代わりにテンプレートで使用されると、htmlエンティティはテキストとして ""になります。 「」なども同様です。
Vue 2.6.10

このための回避策を探している人々のために:
改行なしのスペースを含む文字列を小道具として渡す場合、スペースを文字列の一部である可能性が低い文字(私の場合は「zzz」)に置き換えました。
var newName = program_name.replace(/\s/g,'zzz');

次に、この小道具を表示または使用する必要がある実際のコンポーネントに、上記のアクションを元に戻し、プレースホルダー文字をスペースに再度置き換える計算関数があります

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/10485およびhttps://github.com/vuejs/vue/issues/11059に関連している可能性があり
したがって、既存のPRも確認する価値があります。

このページは役に立ちましたか?
0 / 5 - 0 評価