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.


Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!