Vue data encode/decode issue

by Jessy Cormier

HTML

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<h1>
Test Font-Awesome icon inside an input placeholder.
</h1>

<strong>Does icon work: </strong>
<i class="fa fa-user"></i>
<i class="fa fa-map"></i>
<i class="fa fa-key"></i>
<i class="fa fa-archive"></i>

<em>( if you see icons on this line, font-awesome is loaded and working )</em>
<hr />

<strong>HTML</strong><br>
<input type="text" placeholder="&#xf002;" />
<hr />

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

CSS

input {
  padding-left: 2px;
  font-family: "FontAwesome";
}

JavaScript

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