Wie HTML-Platzhalterattribut in gerenderten Vue

Question

zu entkommen Ich habe ein jsFiddle eingerichtet, um das Problem zu präsentieren.

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

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

Dies ist nur ein Beispiel (überprüfen Sie die jsFiddle für eine Arbeitsprobe) von dem, was ich zu tun werde versuchen. In meinem realen Projekt habe ich eine .vue Komponente; unabhängig davon, ob sich mein Icon in den Daten oder direkt in dem befindet, habe ich das gleiche Problem. aber wegen stackoverflow habe ich ein "funktionierendes" Beispiel des Problems in der jsFiddle gemacht.

Ich versuche, ein Font-Awesome-Symbol in den Platzhaltertext einer Eingabe einzufügen.

Irgendein Einblick, wie man dieses Problem löst, würde groß sein.

Answer 1

Um Unicode-Zeichen in Javascript zu verwenden, müssen Sie sie ordnungsgemäß entfernen. Zu zitieren Microsofts Seite auf Special Characters (JavaScript)

Sie können ein Unicode-Zeichen angeben, indem Sie die \ uhhhh entkommen Sequenz, wo hhhh ist eine vierstellige Hexadezimalzahl.

Der Unicode-Bezeichner für die font-awesome magnify-glass icon ist F002.

Als solche werden Sie die stattdessen folgende wollen:

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