VueJS 2.0

VueJS 2.0 data binding, Listing Data, Render Select Field Options

Learn VueJS 2.0 Data Binding, Data Listing and working with Select Field
Written by Yogesh Koli

How to use VueJS 2.0?

Want to start learning VueJS? so you are right place in this tutorial series I am gone give you a start from very basic of vuejs to the advanced level

VueJS is very popular framework for developing user interface, the framework more focus on User interface meaning the View from MVC pattern, currently VueJS begin used in Laravel Framework it is growing with Laravel, if your a Laravel developer or want to learn Laravel framework VueJS is going to be very supportive and usable while your going to start working on live application using Laravel framework it will boost your career

If you install new Laravel 5 Project you will see VueJS is already configured and ready to with sample template and VueJS initialisation, so this is the example of importance learning VueJS.

This tutorial preferred for beginner who is totally new in VueJS and want to start learning VueJS from scratch.

How to install VueJS?

There are three different ways to install VueJS, those are using CDN, NPM or CLI here I would recommend to use CDN as it is easy to begin with.

We can import Vuejs CDN library as showing below:

VieJS Simple Data binding

VueJS supports dynamic data binding to the DOM with very simple code, following example shows how we can bind data and display on to the webpage

If you try to run above script into the browser it should act like below result:

Try to change the text from the text box and see the magic, text should auto reflect at both places where we are displaying the data

Next let’s start by learning few little tricks by listing data from array in using vueJs directives.

Listing Data from an Array Object by Using VueJS Directive:

In the below example we are using an VueJS directive called v-for, v-for directive is used to iterate database from collection of list or we can the list out the items from the array, as you see in following script we an items object which has number of items added and we are simple listing them using the directive and iterating the listing tag.

Output of the above script should look like below screen:

vuejs 2.0 data binding, listing data, render select field options

VueJS Listing items from Array Object

VueJS Data Binding to the Select Option Form Field:

We often needs to render data into the select form field along with the options, so hear we gone learn a how to bind select option field in vuejs along with id and name, for example we may want to bind a cities to the select field and cities would have two important properties from the database that is a id of the city and the name of the city, so select option field would have a value as city id and text should be the name of the city

So in the below example we are doing similar operations we simply have a items array along with data and we are using this data to render our select field using v-for directive.

Anther important point to note down is how to get selected id from select field in vuejs, we are solving this answer too, I am using v-model to bind selected with the select field to get selected id by user.

You can the live instance result of the above code:

How get multiple selected items from select field in VueJS?

It is much easier in vuejs to get multiple selected items from the select field, we just need to make few changes in the above script to demonstrate how should we get selected items in array.

Look at the below script:

Check the result from the above script:

Conclusion of the tutorial:

Points to note down what we have learn from this tutorial, especially the focus points of your learning:

  1. Get started with VueJS from scratch
  2. How to import/add vuejs library in page
  3. How to display data on webpage ( text box or simple text )
  4. How to use VueJs model directive
  5. How to use VueJs v-for directive
  6. VueJS Databinding
  7. VueJS Data rendering in to the select field along with the value and text
  8. Get selected option from the select field
  9. Get multiple selection options from the select field.

In next tutorial we are going to learn dynamic attributes binding and class name binding in VueJS – VueJS 2.0 dynamic Attribute binding Class Name binding

Let me know if you get any issue related to this tutorial using comment box below.

Happy Learning!

About the author

Yogesh Koli

Yogesh Koli is a software engineer & a Blogger lives in India. He's driven by an addiction to learning and a love for adventure. he has 5+ years of experience working with the front-end, back-end, web application development, and system design.


This site uses Akismet to reduce spam. Learn how your comment data is processed.

Notify of