Easily Bind Select and Multi-select using Vue


In this section, we will deal with data binding of the select as well as the multi-select element. We will use the same directive as in the previous article v-model. With this tutorial, you will be able to understand the way in which these components work along with Vue.

For All these Exercises we will be using JSFiddle as an editor. If anyone is not familiar with the editor can visit here. If anyone wants to know how to setup the editor and get started we do have two tutorials for you as mentioned below.
  1. Introduction to the Vue Framework
  2. Getting started with Vue Framework
Alternatively, if you have not visited the earlier version of this tutorial, then I highly recommend you to check out the “Learn Fast Handling User Inputs & form bindings using Vue”.

Select Component Binding with Vue

In order to bind the select component with the dropdown. We will follow the underlying steps.

  1. Create an HTML Template for the experiment. The select component has v-model pointing to a property which will be found in the data attribute. Have a look at the id of the div which is called app .
  • <div id=”app”> <select v-model=”itemSelected”> <option disabled value=””>Please select one</option> <option>A</option> <option>B</option> <option>C</option> </select> <span>Selected: {{ itemSelected }}</span> </div>
  1. Now let’s put together the JavaScript which will make this application work. Here you can see that Vue is being instantiated and then it selects app and then attaches the itemSelected as the data property.
  • var app = new Vue({ el: ‘#app’, data: { itemSelected: ‘’ } })
  1. These two will kick in life into the application. You can have a look at the working sample out here. We also have for you a simple GIF which can give you a good perspective of what we are dealing with shown below
Binding Select Box with Vue
  1. Binding Select Box with Vue
  2. You can also this whole thing in action out here in Fiddle Sample
NOTE: You must always specify an empty string if you are have not initialized the data in the data’s itemSelected attribute. In iPhone, it does not work and does not allow to reselect the option of not provided with an initial value.

Multi-Select Binding with Vue

In this section, we will be concentrating on the multi-select component and we will be using the multi-select in order to get our work started. The concepts remain the same the only thing that changes is the component. So let’s see this stepwise.

  1. Let’s create the HTML template first. In this, the only change is the multiple attribute that comes along with the select
  • <div id=”app”> <select v-model=”itemSelected” multiple> <option>Apples</option> <option>Banana</option> <option>Cole</option> </select> <br> <span>Selected: {{ itemSelected }}</span> </div>
  1. Let’s have a look at the JavaScript part of it. Here the only change you will find pertains to the itemSelected data property to be changed to an Array. It signifies to hold multiple values. Now, this script will easily hook onto the above template and give rise to the Multi-select in action.
  • var app = new Vue({ el: ‘#app’, data: { itemSelected: [] } })
  1. Let’s see all this working together out here in the GIF. Alternatively, you can have a look at the JSFiddle as well.
Binding Multi Select Box with Vue
  1. Binding Multi Select Box with Vue
  2. You can have a look at the sample code out here below. Play with it in order to make things clear for yourself.


Here we conclude the data binding of various elements available for a form. We will be dealing with Dynamic Data Binding in the next few lessons but till here we have seen how easy it is to bind various types of data in with the UI. We will talk more about other aspects of Vue in details in further articles.

Originally published at The Web Juice.

Like what you read? Give Shiv Kumar Ganesh a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.