I have a dropdown in Vue.Js, I need to Bind Font Awesome icon after each dropdown items.
I am new to Vue.js so please guide how to do that. I am using below code to bind items in dropdown
<select id="testID" v-model="testModel" v-on:change="changeEvent">
<option v-bind:value="da" v-for="da in data.Users">
{{da.DisplayText}}
</option>
<select>
What i have tried so Far
I tried to use element inside option tag but did not get any thing. I tried below syntax also
<select id="testID" v-model="testModel" v-on:change="changeEvent">
<option v-bind:value="da" v-for="da in data.Users">
{{da.DisplayText}}
<span><i class="fa fa-circle"></i></span>
</option>
<select>
I tried Image tag also but no luck so far. I am using <i> tag because i need to raise a javascript event on mouse over of each drop down item.
Please help
Instead use the Unicode version of the icon instead.
For the circle icon the unicode value is 
Link to icon.
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css" rel="stylesheet"/>
<select id="testID" v-model="testModel" v-on:change="changeEvent">
<option v-bind:value="da" v-for="da in data.Users">{{da.DisplayText}} </option>
</select>
Check out this related post. Should answer your question.