Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to escape html placeholder attribute in rendered vue

Tags:

I've setup a jsFiddle to showcase the issue.

<div id="app">
  <strong>{{title}}</strong><br>
  <input type="text" :placeholder="icon" />
</div>
new Vue({
  el: '#app',
  data: {
    title: 'Vue Rendered Info',
    icon: '&#xf002;'
  }
});

This is just a sample (check the jsFiddle for a working sample) of what I'm trying to do. In my real project I have a .vue component; regardless of my icon being in the data or directly in the I have the same issue. but for the sake of stackoverflow I've made a "working" example of the issue in the jsFiddle.

I'm attempting to place a Font-Awesome icon inside of the placeholder text of an input.

Any insight on how to solve this issue would be great.