[Vuejs]-How to disabled dropdown select conditionally in Vue JS

by

3👍

You don’t have to create a computed property, you can just check it like this.

new Vue({
  el: '#app',
  data: {
    radioVal: '',
  }
});

<div id="app">
  <input type="radio" v-model="radioVal" name="radioType" value="one">
  <label for="Radio1">Radio 1</label>
  <input type="radio" v-model="radioVal" name="radioType" value="two">
  <label for="Radio1">Radio 2</label>
  
  <div>
     <!-- Disable the select when radioVal value is two --> 
      <select id="inputGroupSelect01" :disabled="radioVal === 'two'">
        <option selected>Choose...</option>
        <option value="1">One</option>
        <option value="2">Two</option>
        <option value="3">Three</option>
      </select>
  </div>
</div>
👤Mohib Arshi

0👍

In addition to the other answer, it’s probably worth noting that a computed should ideally be pure and not have what is called "side effects". That basically means a computed should not change other variables, but return something based on other variables (hence the name "computed"). So, like this:

radioEnable(){
  return this.radioVal === 'one';
}

But as stated, you don’t even need the computed here.

👤Brother Woodrow

Leave a comment