IMG-LOGO

VueJS Select Binding

andy - 15 Dec, 2020 1280 Views 0 Comment

In this tutorial, we are going to learn how to bind an array object into an HTML select. We also going to learn how to store the selection of the select value into a VueJS model entity.

Here is the full source code of the HTML and Javascript.


<!doctype html>
<html>
	<head>
		<title>bytutorial.com - Vue Select Binding</title>
	</head>
	<body>
		<div id="app">
			<p>We bind a product list array into the following select input.</p>
			<select v-model="selectedValue" v-on:click="showResult()">
				<option value="">Select Product</option>
				<option v-bind:key="product.productId" v-for="product in productList" v-bind:value="product.productId">{{ product.productName }}</option>
			</select>
			<p></p>
			<div v-if="message != ''">{{message}}</div>
		</div>
	</body>
	<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
	<script>
		var app = new Vue({
			el: '#app',
			data: {
				productList: [],
				selectedValue: "",
				message: ""
			},
			
			methods: {
				showResult(){
					this.message = "";
					if(parseInt(this.selectedValue) > 0){
						this.message = "You have selected Product Id: " + this.selectedValue + " - " + this.getProductName(this.selectedValue);
					}
				},
				
				getProductName(id){
					for(var i = 0; i < this.productList.length; i++){
						if(this.productList[i].productId == id){
							return this.productList[i].productName;
						}
					}
					return "";
				}
			},
			
			mounted(){
				this.productList.push({productId: 1, productName: "Wallet"});
				this.productList.push({productId: 2, productName: "Belt"});
				this.productList.push({productId: 3, productName: "Pants"});
				this.productList.push({productId: 4, productName: "Tshirt"});
			}
		});
	</script>
</html>

We declared 3 data variables which are:

  1. productList Variable
    This variable will hold an array of product objects. The product object will have two field properties. The first field will be the product id and the second one will be the product name. 
     
  2. selectedValue Variable
    This variable will be used to store the selected value of the select box. By default, it will be set to an empty string.
     
  3. message Variable
    This variable will display a message to notify the user of the product selection made by the user. By default, it will display an empty message when no selection is made.

If you notice in the code. We use the mounted method. This predefined method is called when the VueJs reactive components and templates are rendered in DOM. In this method call, we inserted a list of product objects into the productList data variable. If you have a look into the following code.


<select v-model="selectedValue" v-on:click="showResult()">
	<option value="">Select Product</option>
	<option v-bind:key="product.productId" v-for="product in productList" v-bind:value="product.productId">{{ product.productName }}</option>
</select>

In the second option value, we bind the key and value against the productId. We also use the v-for directive to inserting the product information in a loop. In the select input itself, we add a model directive and an event click handler that will show a message to the user based on the user's selection.

If you have a look into the message code section. We only render or display the message if the message is not empty.


<div v-if="message != ''">{{message}}</div>

In the methods section. We declare two methods. The first method showResult will be used to set the message variable according to our product selection. While the getProductName method will be used to return the product name by passing the productId that is retrieved from the selectedValue model.

Demo

To see the live demo, you can click the following link.

See Vue Select Binding in action.

Download

To download the demo file. Please click the following URL link.

Download file.

Comments

There are no comments available.

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

Related Blogs

Related Tutorials

How to set radio button checked in Vue.js?

If you have a group of radio buttons and want to bind and set a radio button to be checked. You can perform a condition against the checked property value of the radio button.

How to use methods in Vue.js?

In this tutorial we are going to learn on how to use methods in Vue js So what actually a method is in Vue js A method can be considered as an action It has a function procedure that is ...

VueJS Button Click Event

We are going to create a really simple VueJS application to showcase a button click event handling in VueJS.

What is a Vue.js?

Vue js is another popular javascript library for building interactive web interfaces The library is designed to focus on the view layer only It is very lightweight and pretty easy to use compare to another library competitors such as Angular ...