Dynamically disable option in Vuetify overflow component

Question

Vuetify disabled prop directly disabled input itself.I am trying to disable individual select option as per content on page.If we pass disabled="string" to items array (static arrangement).

How to make it dynamic.I have made Codepen for the same https://codepen.io/spider007/pen/eYmLBOG

<div id="app">
  <v-app id="inspire">
    <v-container>
      <v-overflow-btn
        class="my-2"
        :items="items"
        label="Overflow Btn - Dense"
        dense
        v-model="recordToAdd"
      ></v-overflow-btn>

      <p v-if =" recordToAdd === '1' ">A's content is here -- i.e, Option        A must be disabled in selection option</p>

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

JS

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data: () => ({
    recordToAdd : "",
    items: [
        {text:"A",value:"1"},
        {text:"B",value:"2"},
        {text:"C",value:"3"},        
    ],
  }),
})

I'm not sure if I understood your question: do you want to disable the option A if the user selects the option A, or disable the option B if the user selects the option B? — Dan
@Dan Yes i want it to disable when content belonging to that item is there. — Kunal Ahirrao

Macarthur Macarthur · Accepted Answer · 2020-01-30T20:50:51

You just need to add disabled: true in the data.

<template>
...
  <v-overflow-btn
    class="my-2"
    :items="dropdown"
    label="Test"
    segmented
    target="#dropdown-example"
  />
...
</template>

...
  data() {
    return {
      disabled: false,
      dropdown: [
        // Always disabled
        { text: 'disabled option', callback: () => console.log('disabled'), disabled: true },
        // disable depending on another variable
        { text: 'depending', callback: () => console.log('Hello'), disabled: this.disabled },
        { text: 'other Option', callback: () => console.log('Option') },
      ]
    }
  },

Dynamically disable option in Vuetify overflow component

1 Answers