Vuejs form input binding with select box option

Vue select box binding is complex for some time for beginner developers, specially when we need to bind using a v-model with dynamic data.

Here below working example that will help you to understand how to bind select boxes in form using Vue js.

Below I made a simple designs to look better select box dropdown.

Then after I have take countries available in data array. first, I define the countries array and make some static country name in the array.

After defining the variable you can see in the template I have taken for loop for append data inside the option tag for select get select box value.

Once I select country name in the select box that selected value will bind in the select item variable and that will show.

Here I take ExmapleComponent.vue, this is my project component for demonstration use.

<template>
  <div class="container mt-5">
      <form class="form">
          <div class="form-group">
              <label for="country">Select Country :</label>
              <select id="country" class="form-control" v-model="selectItem">
                  <option value="" selected disabled>Select your country name</option>
                  <option v-for="(country,index) in countries" :key="index">{{ country }}</option>
              </select>      
          </div>
          <div class="mt-3">Your Country: <font color="red">{{ selectItem }}</font></div>
      </form>
  </div>
</template>
      
<script>

export default {
  name: 'HelloWorld',
  data(){
      return {
      countries:[ 
          'India',
          'Indonesia',
          'Iran',
          'Ireland',
          'Israel',
          'Italy',
          'Jamaica',
          'Japan',
          'Jordan',
          'Kazakhstan',
          'Kenya',
          'Kuwait',
          'Kyrgyzstan',
          'Laos',
          'Latvia',
          'Lebanon',
          'Lesotho',
          'Libyan Arab Jamahiriya',
          'Liechtenstein'
      ],
      selectItem:"",
    }
  }
}

</script>
<style scoped>
// YOUR CUSTOM STYLE
</style>

By referring above example you can easy to understand how to use the select box dropdown and binding the select box value in the variable.

Thanks...

Dharmesh Chauhan

(Swapinfoway Founder)

Hello Sir, We are brothers origin from Gujarat India, Fullstack developers working together since 2016. We have lots of skills in web development in different technologies here I mention PHP, Laravel, Javascript, Vuejs, Ajax, API, Payment Gateway Integration, Database, HTML5, CSS3, and Server Administration. So you need our service Please Contact Us

Haresh Chauhan

(Co-Founder)