Insert pictures in vue-multiselect

Tram Ho

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.

II. Install vue-multiselect.

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.

Share the news now

Source : Viblo