How To Use Dropdown And Radio Buttons In Vue.js

Introduction

In this article, we are going to learn how we use the radio button and dropdown select in Vue.js. Radio button is an element that allows the user to select only one option from multiple options.

You can check my previous articles on Vue.js from the below mentioned links.

Prerequisites

We should have basic knowledge of HTML and Vue.js
Visual Studio Code editor

Create VueJS Project

Create a Vue.js project by using the following command.

vue create Dropdowndemo

Now open this project in Vs code and install bootstrap.

npm install bootstrap-vue bootstrap --save

Now open the main.js file and import bootstrap reference.

import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'

Now right click on the components folder and add a new component named 'dropdowndemo.vue'. Now open dropdowndemo.vue component and add the following code.

<template>
  <div id="app">
    <div class="row" style="margin:10px">
      <div class="col-sm-12 btn btn-info"> How To Use Dropdown And Radio Buttons In Vue.js </div>
    </div>
    <div class=" row col-sm-12">
      <div class="col-sm-4"></div>
      <div class="col-sm-4">
        <select class="form-control" @change="changevalue($event)">
          <option value="" selected disabled>Select Value</option>
          <option v-for="data in rowData" :value="data.Id" :key="data.Id">{{ data.Name }}</option>
        </select>
      </div>
      <div class="col-sm-4"></div>
    </div>
    <br>
    <br>
    <p v-if="seen">
      <span>Selected Value: <b> {{ selectedvalue  }}</b>
      </span>
    </p>
  </div>
</template>
<script>
  import 'bootstrap/dist/css/bootstrap.css'
  import 'bootstrap-vue/dist/bootstrap-vue.css'
  export default {
    name: 'Dropdowndemo',
    data() {
      return {
        selectedvalue: 'No Value Selected',
        seen: false,
        rowData: [{
          Id: "100",
          Name: "Sanwar",
          Age: "25",
          Address: "Jaipur",
          City: "Jaipur",
          Salary: "500000",
          Department: "IT",
        }, {
          Id: "2",
          Name: "Nisha",
          Age: "25",
          Address: "C-Scheme",
          City: "Jaipur",
          Salary: "500000",
          Department: "IT",
        }, {
          Id: "3",
          Name: "David",
          Age: "25",
          Address: "C-Scheme",
          City: "Jaipur",
          Salary: "500000",
          Department: "IT",
        }, {
          Id: "4",
          Name: "Sam",
          Age: "25",
          Address: "C-Scheme",
          City: "Jaipur",
          Salary: "500000",
          Department: "IT",
        }, {
          Id: "5",
          Name: "Jyotsna",
          Age: "25",
          Address: "C-Scheme",
          City: "Mumbai",
          Salary: "500000",
          Department: "IT",
        }, {
          Id: "6",
          Name: "Sid",
          Age: "25",
          Address: "C-Scheme",
          City: "Bangalore",
          Salary: "500000",
          Department: "IT",
        }, {
          Id: "7",
          Name: "Chavi",
          Age: "25",
          Address: "C-Scheme",
          City: "Noida",
          Salary: "500000",
          Department: "IT",
        }, {
          Id: "8",
          Name: "Nisha",
          Age: "25",
          Address: "C-Scheme",
          City: "Delhi",
          Salary: "500000",
          Department: "IT",
        }]
      }
    },
    methods: {
      changevalue(event) {
        this.selectedvalue = event.target.options[event.target.options.selectedIndex].text
        console.log(this.selectedvalue)
        this.seen = true;
      }
    }
  }
</script>
<style></style>

Now open App.vue component and import the dropdowndemo component. add the following code in App.vue component.

<template>
  <div id="app">
    <Dropdowndemo />
  </div>
</template>
<script>
  import Dropdowndemo from './components/dropdowndemo.vue'
  export default {
    name: 'App',
    components: {
      Dropdowndemo
    }
  }
</script>
<style></style>

Now run the application by using 'npm run serve' command and check.

How To Use Dropdown And Radio Buttons In Vue.js

Select a value from dropdown,

How To Use Dropdown And Radio Buttons In Vue.js

Now right click on the Src folder > components folder and create a new component named 'radiobuttondemo.vue'.and add the following code in this file

<template>
  <div id="app">
    <div class="row" style="margin:10px">
      <div class="col-sm-12 btn btn-info"> How To Use Dropdown And Radio Buttons In Vue.js </div>
    </div>
    <div class=" row col-sm-12"></div>
    <br>
    <br>
    <div>
      <input type="radio" name="test_id" @change="onChange($event)" value="male"> Male <input type="radio" name="test_id" @change="onChange($event)" value="female"> Female
    </div>
  </div>
</template>
<script>
  import 'bootstrap/dist/css/bootstrap.css'
  import 'bootstrap-vue/dist/bootstrap-vue.css'
  export default {
    name: 'radiobuttondemo',
    data() {
      return {}
    },
    methods: {
      onChange(event) {
        var data = event.target.value;
        console.log(data);
        alert(data)
      }
    }
  }
</script>
<style></style>

Now open App.vue component and import the radiobuttondemo component. add the following code in App.vue component.

<template>
  <div id="app">
    <radiobuttondemo />
  </div>
</template>
<script>
  import radiobuttondemo from './components/radiobuttondemo.vue'
  export default {
    name: 'App',
    components: {
      radiobuttondemo
    }
  }
</script>
<style></style>

Now run the application by using 'npm run serve' command and check.

How To Use Dropdown And Radio Buttons In Vue.js

Select a value and check,

How To Use Dropdown And Radio Buttons In Vue.js

Summary

In this article, we learned how we use dropdown and radio button in Vue.js applications