선택 옵션에서 값을 비활성화하는 방법(vue.js 2)

선택 옵션에서 값을 비활성화하는 방법(vue.js 2)

내 컴포넌트는 다음과 같습니다.

<div id="demo">
  <div>
    <select class="form-control" v-model="selected" required>
      <option v-for="option in options" v-bind:value="option.id">{{ option.name }}</option>
    </select>
    {{selected}}
  </div>
</div>

var demo = new Vue({
  ...
  data() {
    return {
      selected: '',
      options: [{
        id: '',
        name: 'Select Category'
      }]
    };
  },
  ...
})

자세한 코드와 데모를 보려면 https://fiddle.jshell.net/oscar11/stvct9er/5/를 방문하십시오.https://fiddle.jshell.net/oscar11/stvct9er/5/

"Select Category(카테고리 선택)"를 비활성화합니다.따라서 "카테고리 선택"이 비활성화됩니다.사용자가 선택할 수 없습니다.사용자는 "카테고리 선택" 이외의 값만 선택할 수 있습니다.

어떻게 해야 하죠?

추가하셔야 합니다.option직접 에select태그를 붙입니다.

<select class="form-control" v-model="selected" required>
  <option value="" disabled>Select a category</option>
  <option v-for="option in options" v-bind:value="option.id">{{ option.name }}</option>
</select>

또, 에서 삭제합니다.data기능.

data() {
  return {
    selected: '',
    options: []
  };
}

이 옵션을 추가하지 않는 것이 좋습니다.options어레이, 즉placeholder에 대한 속성select.

다른 옵션은 바인딩을 사용하여 해당 요소를 비활성화하는 것입니다.

<option v-for="option in options" 
        :disabled="!option.id"
        v-bind:value="option.id">
    {{ option.name }}
</option>

언급URL : https://stackoverflow.com/questions/42169217/how-to-disable-value-on-the-select-option-vue-js-2