Twitter Bootstrap Question posted in

How to disabled dropdown select conditionally in Vue JS-Twitter bootstrap

I’m learning vue js, and am trying about conditional input group with vue js. I have 2 radio buttons, and 1 dropdown select. What I want is when Radio 1 is selected, the dropdown is enabled. and when Radio 2 is selected, the dropdown is disabled. I have made the code as below. Can anyone help me?

new Vue({
  el: '#app',
  data: {
    radioTypes: [
      {
         name:'Type 1', 
         value:60
      },
      {
         name:'Type 2', 
         value:70
       }
    ],
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css" integrity="sha512-P5MgMn1jBN01asBgU0z60Qk4QxiXo86+wlFahKrsQf37c9cro517WzVSPPV1tDKzhku2iJ2FVgL67wG03SGnNA==" crossorigin="anonymous" />

<div id="app">
   <div v-for="data in radioTypes" v-bind:key="data.name">
      <input type="radio" v-model="radioVal" name="storage-type" :id="'storage'+data.name.toLowerCase()" :value="data.name">
      <label :for="'storage-'+data.name.toLowerCase()">{{data.name}}</label>
    </div>
  
  <div> 
      <select id="inputGroupSelect01" :disabled="radioTypes.name === 'Type 2'">
        <option selected>Choose...</option>
        <option value="1">One</option>
        <option value="2">Two</option>
        <option value="3">Three</option>
      </select>
  </div>
</div>
Tags:

2

Answers


  1. 0

    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>
    Login or Signup to reply.
  2. 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.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search