レンダリングされたvueのhtmlプレースホルダ属性をエスケープする方法

Question

jsFiddleをセットアップして問題を紹介しました。

<div id="app"> 
    <strong>{{title}}</strong><br> 
    <input type="text" :placeholder="icon" /> 
</div> 

new Vue({ 
    el: '#app', 
    data: { 
    title: 'Vue Rendered Info', 
    icon: '' 
    } 
}); 

これは私が何をしようとしているのほんの一例（ワーキングサンプルのためjsFiddleを確認してください）です。実際のプロジェクトでは、私は.vueコンポーネントを持っています。私のアイコンがデータにあるかどうかにかかわらず、私は同じ問題を抱えています。 stackoverflowのために、私はjsFiddleで問題の "実用的な"例を作りました。

入力のプレースホルダテキストの中にフォントアウェソムアイコンを配置しようとしています。

この問題を解決する方法についての洞察は素晴らしいことでしょう。

Answer 1

JavaScriptでUnicode文字を使用するには、適切にエスケープする必要があります。 Special Characters (JavaScript)

にMicrosoftのページを引用するあなたはHHHHは4桁の16進数で\ uhhhh脱出 シーケンスを、使用してUnicode文字を指定することができます。

font-awesome magnify-glass iconのユニコードIDはF002です。このように

あなたの代わりに、以下をお勧めします：それは働く理由

new Vue({ 
    el: '#app', 
    data: { 
     title: 'Vue Rendered Info', 
     icon: '\uf002' 
    } 
});