Как заблокировать уже выбранные номера из списка, массив выбранных номеров у меня есть, что с ним делать и как его применить?

Question

У меня есть вопрос, как заблокировать уже выбранные номера из списка, массив выбранных номеров у меня есть, что с ним делать и как его применить?

                    <select class="form-control" v-model="sortItem">
                      <option
                        v-for="item in 30"
                        v-bind:key="item"
                        v-bind:value="item"
                        v-text="item"
                        class="form-control"
                      ></option>
                    </select>

Вот массив

UF_SORT [ 13, 18, 24 ]

Нужно по исходя из этого массива заблокировать и сделать серыми цифры в выпадающем списке. Подскажите как это сделать?

Answer 1

       <select class="form-control" v-model="sortItem">
                      <option
                        v-for="item in 30"
                        v-bind:key="item"
                        v-bind:value="item"
                        v-text="item"
                        class="form-control"
                        :disabled="arr.includes(item)"
                      ></option>
                    </select>

Answer 2

Полагаясь на массив, который содержит id выбранных пунктов из списка, вы можете для каждого <option> проверить есть ли его id в списке выбранных, как:

UF_SORT.includes(id)

и назначить в зависимости от этого атрибуту disabled значение

new Vue({
  el: '#app',
  data() {
    return {
      UF_SORT:[ 13, 18, 24 ],
    }
  },
  methods: {
    checkDisable(id) {
      return this.UF_SORT.includes(id)
    },
  },
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
<div id="app">
  <select class="form" v-model="UF_SORT" multiple style="height: 100pt">
    <option v-for="item in 30" v-bind:key="item" v-bind:value="item" v-text="`Пункт - ${item}`" :disabled="checkDisable(item)"></option>
  </select>
  <hr>
    {{UF_SORT}}
</div>

Пример с инициализацией списка выбранных элементов при загрузке:

// выбранные элементы, эти данные могут быть получены из API
const sortList = [ 13, 18, 24 ]

new Vue({
  el: '#app',
  data() {
    return {
      UF_SORT:[],
    }
  },
  mounted(){
    // инициализируем функцию
    this.getSortList()
  },
  methods: {
    checkDisable(id) {
      return this.UF_SORT.includes(id)
    },
    getSortList() {
      // здесь ваша функция получения списка выбранных элементов
      // ExpertAdvice.getListSortNumberProjectsAdvice(this.$route.params.id)
      //  .then( ({ data }) => { this.UF_SORT= data; } );
      this.UF_SORT = sortList // сторонние данные заносим в UF_SORT(демонстрация)
    }
  },
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
<div id="app">
  <select class="form" v-model="UF_SORT" multiple style="height: 100pt">
    <option v-for="item in 30" v-bind:key="item" v-bind:value="item" v-text="`Пункт - ${item}`" :disabled="checkDisable(item)"></option>
  </select>
  <hr>
    {{UF_SORT}}
</div>

БЛОГ НА HUSL

Как заблокировать уже выбранные номера из списка, массив выбранных номеров у меня есть, что с ним делать и как его применить?

Ответы (2 шт):