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>

Solution 1

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>

Solution 2

Vue-select allows this now with the prop :selectable

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

Solution 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>  

Comments

[thanksd]

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

[Nitish Kumar]

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

[Eriks]

this should be selected answer. Thank you