VueJS - Disable a Select Drop-down menu if there are less than 2 options

Question

I have several select drop-downs which pull data using an Axios call. I would like the drop-downs to be disabled (greyed out) if there are fewer than 2 options left. I have managed to disable a submit button as a proof of concept but I can't get the select menu itself to disable. Maybe you cant do it this way, I'm not sure. Like most folk who post Vue questions. I'm new to Vue :) Any help would be greatly appreciated.

<div id="app">
<select v-model="quantity">
 <option disabled value="">Select</option>
  <option value="1">1</option>
  <option value="2">2</option>
   <option value="3">3</option>
   <option value="4">4</option>
  <option value="5">5</option>
   <option value="6">6</option>
</select>

 <button type="submit" :disabled="submitDisabled">Submit</button>
</div>

new Vue({
  el: '#app',
  data: {
    quantity :""
  },
  computed: {
    submitDisabled: function () {
    return this.quantity < 2 ? true : false;
    }
  }
});

tony19 · Accepted Answer · 2022-07-16 02:37:59Z

1

You can use v-bind directive to bind disabled attribute of the <select> to a computed property like selectDisabled:

<select v-model="quantity" v-bind:disabled="selectDisabled">

Example:

new Vue({
  el: '#app',
  data: {
    quantity: 0,
    options: [1, 2]
  },
  computed: {
    submitDisabled: function() {
      return this.quantity < 2;
    },
    selectDisabled: function() {
      return this.options.length <= 2;
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <select v-model="quantity" :disabled="selectDisabled">
    <option disabled value="">Select</option>
    <option v-for="option in options" :value="option">{{option}}</option>
  </select>

  <button type="submit" :disabled="submitDisabled">Submit</button>
</div>

edited Jul 16, 2022 at 2:37

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Apr 27, 2021 at 15:25

T J

43.2k13 gold badges87 silver badges142 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

user13928344 Over a year ago

Thanks for taking the time to help! It does not seem to work for me, however. The select is disabled regardless of the amount of <option>. Is there any other way to achieve this?

T J Over a year ago

@user13928344 I added an example, hope it helps. The vue.js way to create <option>s is to create them from data

user13928344 Over a year ago

@user13928344 This works perfectly! Thank you so much for your help. Greatly appreciated. I noticed that when it disables the select box, it displays the first option, the 'Please select' option which is what it should do of course. However. I need it to display the second and only option left in the select menu. Any advice on how to do this?

T J Over a year ago

For me the above example doesn't display anything on chrome or firefox. I would recommend asking a new question with the setup you have so far

user13928344 Over a year ago

It works well for me. If you add another item to the options: [1, 2, 3] it displays the select menu as expected.

Collectives™ on Stack Overflow

VueJS - Disable a Select Drop-down menu if there are less than 2 options

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related