How to Create a Vue Dropdown Control in Your Web Application

One of the most common input types that users interact with online is dropdowns, which allow users to select from various items. Many organizations use dropdown menus to allow users to complete an online form accurately. They are used for choosing options such as selecting your country or language, or responding to a question with only a few possible responses. 

Besides being a default HTML element through the <select> element, plenty of open-source and third-party dropdown controls are available online; so, which one should you choose?

Thankfully, Wijmo has you covered with ComboBox, the best Vue dropdown control. It's simple to implement, easily customizable, and has an extensive list of features that allow you to integrate it into your other controls and components easily. 

In this article, we'll outline the following features of the ComboBox:

• Dropdown Implementation
• Styling the ComboBox Control
• Customizing the Dropdown Elements

Ready to get started? Download Wijmo Today!

Dropdown Implementation

Before we implement Wijmo's Vue dropdown control, ComboBox, we'll need to install Wijmo's component library. Inside your Vue application, run the following command:

npm i @mescius/wijmo.vue2.all

Note that, while this package reads "vue2," it also supports Vue 3.

This will install all the Wijmo files required for its Vue control set.

Next, we'll need to include Wijmo's styling and the ComboBox module. Inside the App.vue file, within the <script> tags, include the following:

import '@mescius/wijmo.styles/themes/wijmo.theme.material.css';
import '@mescius/wijmo.vue2.input';
import * as wjcInput from '@mescius/wijmo.vue2.input';

We also need to set up the component imports so that we can create the components in markup:

export default {
  name: 'App',
  components: {
    'wj-combo-box': wjcInput.WjComboBox,
    'wj-item-template': wjcInput.WjItemTemplate
  }
}

Now the application is set up to allow us to create a ComboBox control. Inside our App.vue file, we'll retrieve some dummy data to populate our dropdown:

data() {
  return {
    cv: ['US', 'UK', 'China', 'Russia', 'Germany', 'India', 'Italy', 'Canada'];
  };
}

We're just creating an array of countries, from which we'll give the user the ability to select, inside the markup:

<wj-combo-box :itemsSource="cv"></wj-combo-box>

Now, we can run our application to see the ComboBox in action:

As you can see, Wijmo's Vue dropdown neatly displays all our data. Next, it's time to customize the look of the ComboBox.

Styling the ComboBox Control

Wijmo's ComboBox, along with its other controls, is highly customizable. For this sample, we will modify the dropdown to feature a dark-mode aesthetic.

Inside the App.vue file's <style> tag, add the following:

.wj-control .wj-input-group .wj-form-control {
    background: hsl(0, 0%, 15%);
    color: hsl(0, 0%, 70%);
    font-weight: bold;
    padding: 10px 16px 8px;
    font-size: 16px;
}
 
.wj-control .wj-input-group .wj-input-group-btn {
    background: hsl(0, 0%, 15%);
}
 
.wj-control .wj-input-group-btn>.wj-btn.wj-btn-default:hover {
    background: hsl(0, 0%, 30%);
    transition: .4s;
}
 
.wj-control .wj-input-group-btn>.wj-btn.wj-btn-default:hover .wj-glyph-down {
    color: hsl(0, 0%, 85%);
    transition: .4s;
}
 
.wj-combobox {
    border-radius: 0px;
    border: 1px solid rgba(0, 0, 0, 0.5);
}
 
.wj-listbox-item {
    background: hsl(0, 0%, 15%);
    color: hsl(0, 0%, 70%);
}
 
.wj-listbox-item.wj-state-selected {
    background: hsl(0, 0%, 30%);
}
 
.wj-control .wj-input-group .wj-input-group-btn:last-child:not(:first-child)>.wj-btn {
    border-left: 1px solid hsl(0, 0%, 70%);
}
 
.combo-dropdown > .wj-listbox-item:hover {
    cursor: pointer;
    background: hsl(0, 0%, 30%) !important;
    transition: .3s;
  }
 
.wj-glyph-down {
    color: hsl(0, 0%, 70%);
}

There's a fair amount of code above, but all we're doing is modifying the size and color of the ComboBox. We change all the white in the dropdown to black, darken the grey hover effect when users hover over list elements, and add some padding to the control to add a little more space. When we run the application, we'll see the following:

Customizing the Dropdown Elements

Now, loading in an array is pretty basic. In most scenarios, it won't be an array of strings but an array of objects you'll receive. The nice thing about this, however, is that ComboBox makes it easy to bind to objects and select which property of the object you want to bind to.

The first thing that we'll need to do is update our data. Instead of an array of strings, we're now going to set it up to be an array of objects, which will include the country name, sales, and expenses:

data() {
  return {
    cv: [
      {
        country: 'US',
        sales: 8817,
        expenses: 4620
      }, {
        country: 'UK',
        sales: 5692,
        expenses: 3475
      }, {
        country: 'China',
        sales: 9184,
        expenses: 7214
      }, {
        country: 'Russia',
        sales: 3810,
        expenses: 2749
      }, {
        country: 'Germany',
        sales: 5693,
        expenses: 3267
      }, {
        country: 'India',
        sales: 7938,
        expenses: 5173
      }, {
        country: 'Italy',
        sales: 4197,
        expenses: 2972
      }, {
        country: 'Canada',
        sales: 5789,
        expenses: 3206
      }
    ];
  };
}

Now, this is going to cause a problem at first. If you make these changes and run the application, you will notice that the ComboBox doesn't display the data as expected:

As you can see, it now knows that we're passing it an array of objects to display, but it doesn't know what of that object we want to show. So, we're going to make another small change to the ComboBox component we're creating:

<wj-combo-box :itemsSource="cv" :displayMemberPath='country' :headerPath='country'></wj-combo-box>

At this point, we're doing two things. First, displayMemberPath will allow us to set the property value from the object we want to display, in this case, country. Second, we're setting the headerPath property to country as well. The headerPath property is used to decouple the value displayed in the dropdown from the value selected from the dropdown. This is used to display additional information in the dropdown menu, which we will review next.

We will use Wijmo's templating abilities, which we can leverage to overwrite the default HTML that the dropdown uses. Expanding on the additions that we just made, we're going to add another markup element, called wjItemTemplate, which will contain our updated HTML template:

<wj-combo-box :itemsSource="cv" :displayMemberPath='country' :headerPath='country'>
  <wj-item-template v-slot="ctx">
    <div class="item">
      <div class="itemHeader"><b>{ctx.item.country}</div>
      Sales: <b>${ctx.item.sales}</b><br>
      Expenses: <b>${ctx.item.expenses}</b>
    </div>
  </wj-item-template>
</wj-combo-box>

Here, we're passing some custom HTML to the React ComboBox via the wjItemTemplate element; we're using this to display additional information on sales and expenses for each item in the dropdown.

Now, whenever you run the application, you should see the following when expanding the ComboBox dropdown control:

Ready to check it out? Download Wijmo Today!

Conclusion

As you can see, building a powerful and versatile JavaScript dropdown with Wijmo's ComboBox is simple. This article only scratches the surface of what you can do with the ComboBox. If you'd like more information, check out our demos, documentation, and API references.

Happy coding!