如何在 Vuejs 中动态禁用 v-select 选项

Question

我正在尝试VueJs 2.0在我有以下代码的地方构建一个应用程序

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

我想禁用v-selectie http://sagalbot.github.io/vue-select/ element ifv-model withClient = 0并启用withClient= 1

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

Answer 1

Vue-select 现在允许使用 prop:selectable

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

Answer 2

如果尚不支持“禁用”，则很容易添加您自己的：

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