Introduction

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 .
  2. 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.
  3. 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

    Binding Select Box with Vue

  4. 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
  2. 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.
  3. 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

    Binding Multi Select Box with Vue

     

  4. You can have a look at the sample code out here below. Play with it in order to make things clear for yourself.

Conclusion

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.


Also published on Medium.

Subscribe To Our Newsletter

Subscribe To Our Newsletter

Join our mailing list to receive the latest news and updates from our team.

You have Successfully Subscribed!

Pin It on Pinterest

Share This