IMG-LOGO

How to create custom select component in Vue.js?

andy - 21 Feb, 2019 11828 Views 0 Comment

In this tutorial, we are going to learn how to create a custom Vue.js select component. To make a custom select component as flexible as we can, we are going to create the following properties that we can configure our custom select input.

  1. An array of option items. Those option items contains an array of object that requires two property fields which will be the Id and Text value.
  2. A default select option label text. For example: if you dropdownlist contains a list of countries. You may want to set the label text as "Select a Country".
  3. An option to disable select option label text. Set to 1 to disable the label text or set to 0 to enable it.
  4. An option to include a css class.
  5. A function attached onchange event.

Let's get started with creating the component of our custom select input.

var comboBoxComponent = Vue.component('combobox-component', {
    template: `
	  <select class="custom-combobox" v-model="currentOption" :class="customClass" @input="$emit('input', $event.target.value)" @change="onSelectedEvent(currentOption)">
        <option value="" v-if="defaultLabelText != null && defaultLabelText.length > 0" :disabled="disableLabelText == 1">{{ defaultLabelText }}</option>
        <option v-for="item in optionItems" :value="item.Id" :key="item.Id" :selected="defaultSelectedValue == item.Id">{{ defaultSelectedValue }}{{ item.Text }}</option>
      </select>
	`,
    props: {
		value: String,
		customClass: String,
		optionItems: Array,
		disableLabelText: Number,
		defaultLabelText: String,
		onSelectedEvent: Function,
		defaultSelectedValue: String
	},
	
	data(){
		return{
			currentOption: ""
		}
	},
	
	watch: {
		value: function(newValue){
			this.currentOption = newValue;
		}
	},
	
	mounted(){
		this.currentOption = this.defaultSelectedValue;
	}
});

As you can see from above code. We declare our select input as combobox-component. Then in our component template, we specify the declared properties under props section in our combo box template. Then we applied those properties into our template tag attributes. For example, we have the option to specify the default label text, an option to disable the label text, an option to specify the custom CSS class and even we can specify on change event if needed. We also perform a for loop to populate the content of our select item options. Each individual item will have their own unique id key value. You can see from the code where we set the key by specifying :key attribute.

You also have an option set the default selected value. If you see on the props list, there is a field property called defaultSelectedValue. This is a string property type. For example: if you have a list of fruits and Apple has an id key of 1. If you want to make default selection is Apple fruit, you can set this string to 1.

Let's apply our custom select component into a real example. We will create the custom select input and a button to get the value of the select input. Please see the following HTML code.

<div id="app">
	<combobox-component v-model="currentItem" 
		:default-selected-value="selectedValue"
		:custom-class="myClass"
		:option-items="optionsArray"
		:default-label-text="defaultText"
		:disable-label-text="1"
		:on-selected-event="changeEvent">
	</combobox-component>
	
	<button type="button" @click="getValue()">Get Value</button>
</div>

We then write our Vue.js javascript code as below. Do not forget to include the Vue.js library which needs to be included or declared first.

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

Here is our Vue.js initialization javascript code.

var app = new Vue({
	el: '#app',
	data: {
		myClass: 'form-control',
		defaultText: "Select a Fruit",
		optionsArray: [{Id: "1", Text: "Apple"}, {Id: "2", Text: "Banana"}, {Id: "3", Text: "Mango"}, {Id: "4", Text: "Watermelon"}],
		currentItem: "",
		selectedValue: ""
	},
	methods: {
		changeEvent(val){
			alert("Change selection event: You have selected => " + val); 
		},
		
		getValue(){
			alert("Current selected value is: " + this.currentItem);
		}
	}
})

Demo of custom select component in Vue.js

You can see the demo below.

Comments

There are no comments available.

Write Comment
0 characters entered. Maximum characters allowed are 1000 characters.

Related Articles

Data binding in Vue.js

Understanding the basic concept of data binding in Vue.js. In this tutorial, you will learn your first v-model in Vue.js and how the data binding works.