6

在 vuetify 的 v-select 组件上使用“item-disabled”道具时遇到问题。我正在尝试将其与文字选项一起使用。

这是重现该问题的片段：

在此示例中，我想禁用“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},
],

有谁知道如何使禁用文字值起作用？

4

3 回答 3

15

你不能那样做，因为item-disabled财产实际上是为了别的东西。

来自文档：

item-disabled
默认值：disabled
类型：字符串 | 数组 | 功能

设置项目禁用值的属性

所以item-disabled只需指定对象上的哪个字段将被视为“禁用字段”。默认情况下，该字段是disabled.

没有item-disabled你会有这样的对象： 

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

如果对象有一些其他的“禁用属性”（例如customDisabled）然后使用item-disabled这样的道具： 

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

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

密码笔

如果您需要保留字符串数组，那么您可以将项目映射到对象数组并传递它： 

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

密码笔

此外，如果您的禁用字段是嵌套的，您可以传递数组以达到所需的深度，例如： 

:item-disabled="['meta', 'disabled']"
// ...
{
  text: item, 
  meta: {
    disabled: true 
  }
}
于 2019-05-15T17:48:28.313 回答
3

实际工作的最小示例，每个项目的功能检查。

<v-select
  :items="items"
  item-text="name"
  item-value="id"
  :item-disabled="checkIsItemDisabled"
/>

<script>
  data: function(){
    return {
      items: [
        {id: 1, name: 'Foo'},
        {id: 2, name: 'Bar'},
      ],
    },
    methods: {
      checkIsItemDisabled(item) {
        return (item.id === 1)
      },
    }
  },
</script>
于 2020-07-16T10:06:07.480 回答
0

将功能选项添加到@Traxo 的答案：

<v-select :items="items" item-disabled="disableItem">
...
methods: {
  disableItem(item) {
    if (item.prop === this.anyOtherPropValue) {
      return true;
    }
    return false;
  },
},

Yes 在 this.anyOtherPropValue 改变的情况下是被动的

于 2020-07-01T06:11:02.850 回答