Vuejs에서 v-select 옵션을 동적으로 사용하지 않도록 설정하는 방법

Vuejs에서 v-select 옵션을 동적으로 사용하지 않도록 설정하는 방법

어플리케이션을 작성하려고 합니다.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예를 들어, http://sagalbot.github.io/vue-select/ 요소:v-model withClient = 0및 유효하게 하다withClient= 1

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

아직 "disabled"가 지원되지 않는 경우, 다음과 같이 자신의 것을 쉽게 추가할 수 있습니다.

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

Vue-select는 프로펠러를 통해 이를 가능하게 합니다.

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

"비활성화" HTML 속성을 부울에 바인딩하기만 하면 됩니다.
여기에서는 Vuex의 예를 나타냅니다(외부 컴포넌트에서 비활성화해야 합니다).

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

언급URL : https://stackoverflow.com/questions/45678098/how-to-disable-v-select-options-dynamically-in-vuejs