Bind Icon in dropdown list in Vue Js [duplicate]

Question

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

i just want to make sure, did you mean to give icon in every dropdown items? — Dimas Wahyu Notonagoro, Commented Mar 21, 2022 at 23:53
Yes, But i need to raise an event also to show a pop up on hovvering on that icon. — vijay rana, Commented Mar 21, 2022 at 23:55
Please edit your question to show how you're trying to handle this event you keep mentioning — Phil, Commented Mar 22, 2022 at 0:07

samargy_ · Accepted Answer · 2022-03-22 00:08:16Z

0

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

Check out this related post. Should answer your question.

edited Mar 22, 2022 at 0:08

answered Mar 22, 2022 at 0:03

samargy_

331 silver badge6 bronze badges

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
Commented Mar 22, 2022 at 0:06
1

You cannot do that with the <option> element. Instead you are better off implementing a rendered list and doing the logic yourself using divs and lists.
– samargy_
Commented Mar 22, 2022 at 0:09

Add a comment |

Collectives™ on Stack Overflow

Bind Icon in dropdown list in Vue Js [duplicate]

1 Answer 1

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Linked

Related