I. Insert pictures in vue-multiselect.

The select tab is used to select, in some respects it is similar to the radio button, but the difference is that the select has a drop-down menu style. This card has many special restrictions, including not accepting the img tag in the option, which makes adding images to this tag quite difficult. There are some ways like using the background property of css but the most common way people use is to use jquery.

• Link jquery insert image in select option: http://www.devirtuoso.com/2009/08/styling-drop-down-boxes-with-jquery/
• This article is about vue.js, so I would like to introduce a vue-multiselect module to make things easier.

II. Install vue-multiselect.

• First of all, to use multiselect, you need to install it, you can view on the doc and follow the instructions for quick.
• Doc: https://vue-multiselect.js.org/
• How to install, please see here: https://www.npmjs.com/package/vue-multiselect
• Very detailed and simple people run npm and import following the instructions in the link above is ok.

III. Begin.

1. Create file

• Create file with Demo.vue name. I created the views folder in src and created the Demo.vue file in it. (path src / views / Demo.vue)

2. Router handling.

• In the index.js file in the router folder, add a new router as follows.

3. Import multiselect.

• In the Demo.vue file you import vue-multiselect.

• Test it up, we will get this:

4. Insert the image.

• This is also quite simple. You only need to insert your template into the multiselect module. Most vue modules allow us to revise their own template so that users can have a more comfortable look. Similarly you can customize the multiselect template to fit your own needs.

5. The results

6. Note.

IV. Conclude.

• So I have introduced how to insert pictures into multiselect then, quite simple. With the html select tags, you can also add images in the style of adding icons, as follows: https://mdbootstrap.com/docs/jquery/forms/multiselect/