Enable/Disable Button based on selected value

Question

I have a button in my view

<v-menu offset-y>
  <v-btn>
    Action Items
  </v-btn>
  <v-list>
   <v-list-tile
    v-for="(item, index) in items"
    :key="index"      
   :disabled="item.disabled"
  >
   <v-list-tile-title>{{ item.title }}</v-list-tile-title>
   </v-list-tile>
  </v-list>
 </v-menu>

<v-data-table
         v-model="selected">

my data looks like

<script>

    export default {
        data: () => ({
            selected: [],
            items: [
                { title: 'Delete',disabled:false},
            ],
...

i am trying to enable or disable the v-list-tile based on whether the selected array has any values.

i tried something like:

items: [
                { title: 'Delete',disabled:this.selected.length=0},
            ],

but it gives me the following error:

[Vue warn]: Property or method "selected" is not defined on the instance but referenced during render.

please help me to resolve this issue.

Computed property might be ideal in this situation...

omitobi
– omitobi

2018-09-13 15:19:37 +00:00
Commented Sep 13, 2018 at 15:19 — omitobi
– omitobi, Commented Sep 13, 2018 at 15:19

omitobi · Accepted Answer · 2018-09-13 15:27:47Z

1

I would say rather than have a disabled property on your model, you can have it as a computed property like so:

computed: {
    disabled() {
        return this.selected.length < 1; // or === 0   
    }
}

Then use the disabled property in your component.

<v-list-tile v-for="(item, index) in items"
   :key="index"      
   :disabled="disabled">

    <v-list-tile-title>
       {{ item.title }}
    </v-list-tile-title>

</v-list-tile>

PS: that props is passed into your v-list-tile as disabled property of that element. I am not sure if a custom component will be disabled (otherwise you know you'll use it on a real html element)

answered Sep 13, 2018 at 15:27

omitobi

7,3543 gold badges39 silver badges55 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

VitoCK Over a year ago

Hey, buddy, I created similar logic, but my disabled() method is a normal one, not computed. I have a checkbox that must enable/disable a v-select. I do it as follows: <v-select :disabled="disableSelect(i)"></v-select>. However, for some reason the disableSelect method is called only initially, whenever I change the checkbox, it is not fired. Do you know how to solve this?

omitobi Over a year ago

The problem is that when the component is rendered the method is called. But instead you should attach it to an event e.g @changed event. You need to check v-select docs on which event is emitted when the item is changed.

Collectives™ on Stack Overflow

Enable/Disable Button based on selected value

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related