возможно ли как- то сделать неактивные элементы в v-select?

Question

вот код:

    <v-select
        :items="weldMethodItems"
        item-text="name"
        label="label"
        dense
        v-model="name"
        @input="methodVal"
      >
        <template v-slot:selection="{ item }">
          {{ item.name }}
        </template>
        <template v-slot:item="{ item }">
          {{ item.name }}-{{ item.desc }}
        </template>
      </v-select>


     data() {
      return {
       weldMethodItems: [
{ name: 'a, desc: 'qqqqqqqqqqq' },
{ name: 'b', desc: 'wwwwwwwwwwwwww' },
{ name: 'c', desc: 'eeeeeeeeeeeeee' },
{ name: 'd ', desc: 'rrrrrrrrrrrrrrrr' },
{ name: 'e', desc: 'fffffffffffffffff }, 
                                          ]
                  
};

Как можно сделать например последние два "айтема" неактивными? то есть , чтобы их нельзя было выбрать , чтобы они были другого цвета и т.д.?) что то не нашел в интернете ничего касательно именно v-select

Answer 1

Vuetify v-select API гласит, что вы можете передавать во v-select в качестве items - массив объектов, которые могут содержать следующие свойства:

{
  text: string | number | object,
  value: string | number | object,
  disabled: boolean,
  divider: boolean,
  header: string
}

disabled из этого списка и поможет вам "отключить" пункт из списка, достаточно добавить disabled: true в те объекты из массива, которые вы хотите отключить:

weldMethodItems: [
    { value: 'a', text: 'qqqqqqqqqqq' },
    { value: 'b', text: 'wwwwwwwwwwwwww' },
    { value: 'c', text: 'eeeeeeeeeeeeee' },
    { value: 'd ', text: 'rrrrrrrrrrrrrrrr', disabled: true },
    { value: 'e', text: 'fffffffffffffffff', disabled: true  }
    ]

Рабочий пример:

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data: () => ({
    weldMethodItems: [{
        name: 'a',
        desc: 'qqqqqqqqqqq'
      },
      {
        name: 'b',
        desc: 'wwwwwwwwwwwwww'
      },
      {
        name: 'c',
        desc: 'eeeeeeeeeeeeee'
      },
      {
        name: 'd ',
        desc: 'rrrrrrrrrrrrrrrr',
        disabled: true
      },
      {
        name: 'e',
        desc: 'fffffffffffffffff',
        disabled: true
      }
    ]
  })
})

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.js"></script>

<div id="app">
  <v-app id="inspire">
    <v-container fluid grid-list-xl>
      <v-layout wrap align-center>
        <v-flex xs12 sm6 d-flex>
          <v-select :items="weldMethodItems" item-text="name" label="Выберите вариант" dense v-model="name">
            <template v-slot:selection="{ item }">
          {{ item.name }}
        </template>
            <template v-slot:item="{ item }">
          {{ item.name }}-{{ item.desc }}
        </template>
          </v-select>
        </v-flex>

      </v-layout>
    </v-container>
  </v-app>
</div>

БЛОГ НА HUSL

возможно ли как- то сделать неактивные элементы в v-select?

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