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

时间:2017-08-14 15:35:36

标签: vue.js vuejs2

我正在尝试在File Number FileType AgeBusiness AgeCalendar 90440 Strategy 2 4 90441 Strategy 3 5 上构建一个我正在使用以下代码的应用程序

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-select并启用v-model

,我想停用withClient = 0http://sagalbot.github.io/vue-select/元素
withClient= 1

3 个答案:

答案 0 :(得分:2)

如果尚未支持“已禁用”,则可以轻松添加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>

答案 1 :(得分:1)

Vue-select现在可以使用道具:selectable

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

答案 2 :(得分:0)

只需将“禁用”HTML属性绑定到布尔值即可 这里有一个Vuex的例子(select必须从外部组件中禁用)。

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