Vue.Js Get Selected Option on @Change

Vue.js get selected option on @change

Use v-model to bind the value of selected option's value. Here is an example.

<select name="LeaveType" @change="onChange($event)" class="form-control" v-model="key">
   <option value="1">Annual Leave/ Off-Day</option>
   <option value="2">On Demand Leave</option>
</select>
<script>
var vm = new Vue({
    data: {
        key: ""
    },
    methods: {
        onChange(event) {
            console.log(event.target.value)
        }
    }
}
</script>

More reference can been seen from here.

VueJS Using @click on option elements and @change on select element

There's no need for the additional noSecurity variable. Create your select with v-model to track the selected value. Give each option a value attribute.

<select v-model="selected">
  <option value="">Please select a security type</option>
  <option value="none">No Security</option>
  <option value="personal">Personal</option>
  <option value="enterprise">Enterprise</option>
</select>

Check that value:

<div v-if="selected === 'none'">something</div>

You can still use the noSecurity check if you prefer by creating a computed:

computed: {
  noSecurity() {
    return this.selected === 'none';
  }
}

Here's a demo showing both:

new Vue({
  el: "#app",
  data() {
    return {
        selected: ''
    }
  },
  computed: {
    noSecurity() {
      return this.selected === 'none';
    }
  },
  methods: {},
  created() {}
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <select v-model="selected">
    <option value="">Please select a security type</option>
    <option value="none">No Security</option>
    <option value="personal">Personal</option>
    <option value="enterprise">Enterprise</option>
  </select>

  <div v-if="selected === 'none'">something</div>
  <div v-if="noSecurity">something</div>
</div>

onchange pass selected option in input vue

This v-select's onChange function accept a parameter which is a array contains the selected options.

By the way, your can use this codes, open Chrome console to debugger the value of 'a','b','c'.

onChange(a,b,c) {
      debugger;
      console.log(a);
}

vuejs select option change based on conditon

Use a computed property and filter the select options:

computed: {
  filteredAnimalType () {
    if (this.animal_name) {
      // if animalType is a string array
      return this.animalType.filter(t => t.includes(this.animal_name))
      // otherwise filter on the desired property, e.g. t.taxonomy
    }
    return this.animalType
  }
}

Then bind the options as :options="filteredAnimalType"

---

Related Topics