Categories: VueJSVueJS 2.0

VueJS data binding, Listing Data, Render Select Field Options

What is VueJS and How to use VueJS?

Want to start learning VueJS? so you are at 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:

<script src="https://unpkg.com/vue@2.3.4"></script>

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

<!DOCTYPE html>
<html>
<head>
    <title>VueJS 2.0</title>
</head>
<body>

<div id="app">
    <input type="text" v-model="greeting">
    {{ greeting }}
</div>

<script src="https://unpkg.com/vue@2.3.4"></script>

<script>

    var app = new Vue({
        el: "#app",
        data: {
            greeting: "Welcome"
        }
    });

</script>
</body>
</html>

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.

<!DOCTYPE html>
<html>
<head>
    <title>VueJS 2.0</title>
</head>
<body>

<div id="app">
    <ul>
        <li v->
            {{ item }}
        </li>
    </ul>
</div>

<script src="https://unpkg.com/vue@2.3.4"></script>

<script>

    var app = new Vue({
        el: "#app",
        data: {
            items: ['first', 'second', 'third', 'fourth', 'fift', 'six']
        }
    });

</script>
</body>
</html>

Output of the above script should look like below screen:

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.

<!DOCTYPE html>
<html>
<head>
    <title>VueJS 2.0</title>
</head>
<body>

<div id="app">
    <select v-model="selected">
        <option disabled value="">Select Item</option>
        <option v->{{ item.text }}</option>
    </select>

    <p>
        <b>Selected</b>: {{ selected }}
    </p>
</div>

<script src="https://unpkg.com/vue@2.3.4"></script>

<script>

    var app = new Vue({
        el: "#app",
        data: {
            items: [
                {id: 1, text: 'first'},
                {id: 2, text: 'second'},
                {id: 3, text: 'third'},
                {id: 4, text: 'fourth'},
                {id: 5, text: 'fifth'},
                {id: 6, text: 'six'}
            ],
            selected: ''
        }
    });

</script>
</body>
</html>

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:

<!DOCTYPE html>
<html>
<head>
    <title>VueJS 2.0</title>
</head>
<body>

<div id="app">
    <select v-model="selected" multiple>
        <option disabled value="">Select Item</option>
        <option v->{{ item.text }}</option>
    </select>

    <p>
        <b>Selected</b>: {{ selected }}
    </p>
</div>

<script src="https://unpkg.com/vue@2.3.4"></script>

<script>

    var app = new Vue({
        el: "#app",
        data: {
            items: [
                {id: 1, text: 'first'},
                {id: 2, text: 'second'},
                {id: 3, text: 'third'},
                {id: 4, text: 'fourth'},
                {id: 5, text: 'fifth'},
                {id: 6, text: 'six'}
            ],
            selected: []
        }
    });

</script>
</body>
</html>

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!

Yogesh Koli

Software engineer & Blogger lives in India, has 6+ years of experience working with the front-end and back-end web app development.

Recent Posts

Complete guide of using Laravel 6 Eloquent Subquery Enhancements

Learn How to use laravel frameworks new improved feature called Eloquent Subquery and get example of using Eloquent Subqueries and…

4 months ago

3 Useful examples of using Array Map function in PHP – Best Practices

Learn how to use php array map function with easy and essential tutorial to modify arrays in php here I…

4 months ago

Working with PHP Array Filter Function – Best Practices

Learn how to use php array filter function with easy and essential tutorial to filter array in php here I…

4 months ago

How to add Access Modifiers with Constructor Parameters in TypeScript

Want to know how to refactor your Typescript class, Learn here utilising Typescript of the best and essential feature that…

4 months ago

What is Access Modifiers and how to use Access Modifiers in TypeScript ?

What is Access Modifiers in typescript, how to use Access Modifiers, when to use them, what are the advantage of…

4 months ago

Top 10 Super Useful Packages to Improve Laravel applications in 2019

This tutorial provide ultimate list of package those are top 10 on packagist and super useful to optimize your laravel…

4 months ago