0

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

Phil
  • 157,677
  • 23
  • 242
  • 245
vijay rana
  • 1

1 Answers1

0

Instead use the Unicode version of the icon instead.

For the circle icon the unicode value is &#xf111;

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}} &#xf111;</option>
</select>

Check out this related post. Should answer your question.

samargy_
  • 33
  • 1
  • 6
  • I tried this but if i will use this then how i will raise the mouse over event on the icon itself. So Please suggest how to do that. – vijay rana Mar 22 '22 at 00:06
  • 1
    You cannot do that with the ` – samargy_ Mar 22 '22 at 00:09