How can I disable literal values in Vuetify?

Related searches

I am having problems when using the "item-disabled" prop on the v-select component from vuetify. I am trying to use this with literal options.

Here is the snippet which reproduces the issue:

In this example I would like to disable the option "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>

You cant do it like that because item-disabled property is actually for something else.

From docs:

item-disabled Default: disabled Type: string | array | function

Set property of items's disabled value

So item-disabled just specifies which field on the objects will be treated as "disabled-field". By default, that field is disabled.

Without item-disabled you would have objects like this:

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

And if objects have some other "disabled-property" (e.g. customDisabled) then use item-disabled prop like this:

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

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

Codepen

If you need to preserve your arrays of strings then you could just map items to the array of objects and pass it:

<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


Additionally, you can pass array to reach desired depth if your disabled field is nested, for example:

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

[Documentation] item-text/value/disabled types aren't explained , Versions and Environment Vuetify: 1.3.7 Vue: 2.5.17 Browsers: Chrome 70.0. 3538.77 OS: Mac OS 10.14.0 Steps to reproduce Use v-select to� 3 How can I disable literal values in Vuetify? May 15 '19. 2 Is there anyway to remove the shadow, or force vuetify menu to fully align with the left side of the screen?

Adding the function option to @Traxo's answer:

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

Yes is reactive in case this.anyOtherPropValue change

Select component — Vuetify.js, This can be changed using the item-text, item-value and item-disabled props. Objects that have a header or divider property are considered special cases and � Selection control components allows users to complete tasks that require the selection of various options, such as settings.

Real working minimal example with function checking per item.

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

Selection control components — Vuetify.js, disabled. type. boolean. default. false. description. Disable the input Accepts an array of functions that take an input value as an argument and return either� I've had troubles for a long time setting up vuetify 2.3.3 with Storybook 5.3.19. I'm not sure but it seemed that the vue-cli-plugins weren't up2date to handle storybook with vuetify via the vue-cli.

Migration from Vue 1.x — Vue.js, It is now (value, index) to be more consistent with JavaScript's native array like any other attribute: without the v-bind: or : prefix, it is treated as a literal string. If you'd like to delete properties on a Vue instance or its $data , set it to null. The v-data-iterator component is used for displaying data, and shares a majority of its functionality with the v-data-table component. Features include sorting, searching, pagination, and selection.

When we installed Vuetify it modified the App.vue file and added a navigation bar and Vuetify logo. We are going to remove all the information that they provided and instead show our Login Form. Open up the App.vue file. Delete everything inside the v-app-bar. Add a title to the the app bar that just says Vuetify Form Validation. It should look

You can display a thumb-label while sliding or always. It can have a custom color by setting thumb-color and a custom size with thumb-size.With always-dirty its color will never change, even when on min value.

Comments
  • Indeed, I tried for an hour, read issues on the vuetify's github, looked into it but nothing worked so far. I'll dig into it a bit more.