如何在 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>

I want to disable v-select ie 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>

原文由 Nitish Kumar 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

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

原文由 Void Ray 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

Vue-select 现在允许使用道具 :selectable

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

原文由 Sølve T. 发布，翻译遵循 CC BY-SA 4.0 许可协议