How to use Dropdown radio button and checkbox in vue js

Dropdown
how-to-use-dropdown-and-radio-buttons
radio-button-onchange-event-example

Video
Get Checkbox & Radio Button Value

Get Selected Option on Change

We can get the selected option on change by passing in the $event object to an event handler.

For example, we can write:

<select name="fruit" @change="onChange($event)" v-model="key">
   <option value="apple">apple</option>
   <option value="orange">orange</option>
</select>
<script>
const vm = new Vue({
  data: {
    key: ""
  },
  methods: {
    onChange(event) {
      console.log(event.target.value)
    }
  }
}
</script>

We have the onChange method that takes an event object.

Then we can pass in $event and get the selected value with event.target.value .

How To Use Dropdown And Radio Buttons In Vue.js

how-to-use-dropdown-and-radio-buttons-in-vue-js

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
BASIC
Now open this project in Vs code and install bootstrap.

npm install bootstrap-vue bootstrap --save
BASIC
Now open the main.js file and import bootstrap reference.

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

JavaScript
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>

JavaScript
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>

How to Get Selected Radio Button Value in Vuejs

Step 1 – Create New VUE JS App
Step 2 – Create Component
Step 3 – Add Component on App.vue

Step 1 – Create New VUE JS App
In this step, open your terminal and execute the following command to create new vue js app:

<!DOCTYPE html>
<html>
<head>
    <title> How to get radio button value in vue js - Tutsmake.com </title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>

<div id="app">

  <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>

<script type="text/javascript">

    var app = new Vue({
      el: '#app',
      methods: {
          onChange(event) {
              var data = event.target.value;
              console.log(data);
          }
      }
    })

</script>

</body>
</html>

Step 3 – Add Component on App.vue

In this step, visit /src/ directory and App.vue file. And then add the following code into it:

<template>
    <RadioEvent></RadioEvent>
</template>

<script>
import RadioEvent from './components/RadioEvent';

export default {
  components: {
    RadioEvent
  }
}
</script>

vue create my-app
Step 2 – Create Component
In this step, visit /src/components directory and create a new component called radio-event.vue and add the following code into it: