How to disable v-select options dynamically in Vuejs

Question

I'm trying to build an application on VueJs 2.0 where I'm having following codes

<div class="col-sm-6">
    <label class="col-sm-6 control-label">With client*:</label>
    <div class="radio col-sm-3">
        <input type="radio" name="with_client" v-model="withClient" value="1" checked="">
        <label>
            Yes
        </label>
    </div>
    <div class="radio col-sm-3">
        <input type="radio" name="with_client" v-model="withClient" value="0">
        <label>
            No
        </label>
    </div>
</div>

I want to disable v-select i.e. http://sagalbot.github.io/vue-select/ element if v-model withClient = 0 and enable withClient= 1

<v-select multiple :options="contacts" :on-search="getOptions" placeholder="Contact name" v-model="contactParticipants"></v-select>

What is v-select? Is it this: sagalbot.github.io/vue-select? — thanksd
– thanksd, Commented Aug 14, 2017 at 15:45
Currently, it looks like disabling the component is not an option. But, there's a pull request for it github.com/sagalbot/vue-select/pull/118/files?diff=split — thanksd
– thanksd, Commented Aug 14, 2017 at 16:02

Sølve · Accepted Answer · 2021-01-08 11:04:14Z

8

Vue-select allows this now with the prop :selectable

<v-select
  v-model="selectedCar"
  :options="cars"
  :selectable="car => car.disabled"
/>

edited Jan 8, 2021 at 11:04

answered Aug 31, 2020 at 8:45

Sølve

4,5062 gold badges23 silver badges35 bronze badges

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

Comments

Void Ray · Accepted Answer · 2017-08-14 16:33:13Z

6

If "disabled" is not yet supported, it's pretty easy to add your own:

  <style>
    .disabled {
      pointer-events:none;
      color: #bfcbd9;
      cursor: not-allowed;
      background-image: none;
      background-color: #eef1f6;
      border-color: #d1dbe5;   
    }
  </style>

<v-select :options="['foo','bar','baz', 'hello']" v-bind:class="{ disabled: true }"></v-select>

answered Aug 14, 2017 at 16:33

Void Ray

10.3k4 gold badges35 silver badges55 bronze badges

1 Comment

Nitish Kumar Over a year ago

That would have been nice if you had included toggle function to make disabled class true and false.

Vaibhav B. · Accepted Answer · 2018-04-11 07:52:09Z

3

Simply bind "disabled" HTML property to a boolean.
Here an exemple with Vuex (select have to be disabled from outside component).

<v-select
    label="label"
    :options="criterias"
    @input="SELECTED_CRITERIAS_ACTION"
    @keyup.enter.stop="SELECTED_CRITERIAS_ACTION"
    :placeholder="pageDescription"
    multiple
    :disabled="this.$store.state.ModuleSearchCriterias.isSearching"
>
    <span slot="no-options">Pas de résulats</span>
</v-select>

edited Apr 11, 2018 at 7:52

Vaibhav B.

113 bronze badges

answered Apr 11, 2018 at 6:52

Giak C.

315 bronze badges

1 Comment

yogithesymbian Over a year ago

but the value is gone, how to keep the value from v-model ?

Collectives™ on Stack Overflow

How to disable v-select options dynamically in Vuejs

3 Answers 3

Comments

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related