Как я могу отключить литеральные значения в Vuetify? - PullRequest
Новая
       55

Как я могу отключить литеральные значения в Vuetify?

2 голосов
/ 15 мая 2019

У меня проблемы при использовании проп "item-disabled" на компоненте v-select из vuetify. Я пытаюсь использовать это с буквальными параметрами.

Вот фрагмент, который воспроизводит проблему:

В этом примере я бы хотел отключить опцию «Buzz». 

Vue.use(Vuetify)

new Vue({
  el: '#app',
  data: () => ({
    items: ['Foo', 'Bar', 'Fizz', 'Buzz'],
    disabledItems: ['Buzz'],
  })
})
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/vuetify/1.5.14/vuetify.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vuetify/1.5.14/vuetify.min.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="items" :item-disabled="disabledItems" box label="Box style"></v-select>
        </v-flex>
      </v-layout>
    </v-container>
  </v-app>
</div>
<v-select :items="items" :item-disabled="disabledItems"></v-select>
...
items: ['Foo', 'Bar', 'Fizz', 'Buzz'],
disabledItems: ['Buzz'],

Я понимаю, что мог бы использовать не буквальную пару ключ-значение, как в этом примере: https://codepen.io/anon/pen/joyoaj, и это сработало бы. Но я бы предпочел не писать компонент-оболочку для преобразования буквенных опций в ключ-значение, просто чтобы обойти это. 

<v-select :items="items"></v-select>
...
items: [
  {text: 'Foo', value: 'Foo'}, 
  {text: 'Bar', value: 'Bar'}, 
  {text: 'Fizz', value: 'Fizz'}, 
  {text: 'Buzz', value: 'Buzz', disabled: true},
],

Кто-нибудь знает, как заставить работать отключение литеральных значений?

1 Ответ

1 голос
/ 15 мая 2019

Вы не можете сделать это так, потому что свойство item-disabled на самом деле для чего-то другого.

Из документов :

item-disabled
По умолчанию: disabled
Тип: строка | массив | функция

Установить свойство отключенного значения элементов

Так item-disabled просто указывает, какое поле на объектах будет обрабатываться как «отключенное поле». По умолчанию это поле disabled.

Без item-disabled у вас были бы такие объекты: 

items: [
  {text: 'Foo', value: 'Foo'}, 
  {text: 'Buzz', value: 'Buzz', disabled: true},
],

И если у объектов есть какое-то другое «отключенное свойство» (например, customDisabled), тогда используйте item-disabled prop следующим образом: 

 <v-select :items="items" item-disabled="customDisabled"

// ...
items: [
  {text: 'Foo', value: 'Foo'}, 
  {text: 'Buzz', value: 'Buzz', customDisabled: true},
],

Codepen

Если вам нужно сохранить массивы строк, вы можете просто сопоставить элементы с массивом объектов и передать его: 

<v-select :items="computedItems"
// ...
data: () => ({
  items: ['Foo', 'Bar', 'Fizz', 'Buzz'],
  disabledItems: ['Buzz'],
}), 
computed: {
  computedItems() {
    return this.items.map(item => {
      return {
        text: item, 
        disabled: this.disabledItems.includes(item)
      }
    })
  }
}

Codepen

Кроме того, вы можете передать массив для достижения желаемой глубины, если ваше отключенное поле вложено, например: 

:item-disabled="['meta', 'disabled']"
// ...
{
  text: item, 
  meta: {
    disabled: true 
  }
}
...