Vue Component Button is not being disabled dynamically

Question

I have a component command-button wrapping a Vuetify v-btn component.

command-button receives a property called disabled of type boolean, non-required and false by default.

command-button is being used inside another component called toolbar where inside a v-for loop I add the command-button using a configuration array of actions objects passed to toolbar as a property.

<command-button
  v-for="(action, index) in actions"
  :key="index"
  :label="action.label"
  :disabled="action.disabled"
  @click="action.handler"
></command-button>

When I use my toolbar component in my view component like this:

<toolbar :actions="actions"></toolbar>

I declare the actions of the toolbar in the data of my view component, as follows:

data() {
  return {
    ...        
    actions: [
      {
        label: "Delete",
        handler: this.onDelete,
        disabled: this.disable // This can be a computed or a data element
      },
      {
          label: "Add",
          handler: this.onAdd
      }
    ],
    ...
  },

The issue is that the command-button is not being disabled dynamically, no matter if I use a computed or a member in data. It only works if I use the literal true inside the actions configuration object. Making some debugging, the value received inside toolbar for the disabled attribute of actions element is undefined.

Are you getting label attribute?

mare96
– mare96

2020-11-04 12:07:23 +00:00
Commented Nov 4, 2020 at 12:07 — mare96
– mare96, Commented Nov 4, 2020 at 12:07
Yes, the buttons are redered with the label without issues

Ronye Vernaes
– Ronye Vernaes

2020-11-04 12:17:45 +00:00
Commented Nov 4, 2020 at 12:17 — Ronye Vernaes
– Ronye Vernaes, Commented Nov 4, 2020 at 12:17

Hannah · Accepted Answer · 2020-11-04 12:24:40Z

1

You can't reference a computed property in your data object as it won't be defined when the instance is created. You could add a watcher on this.disable and update the value of actions[0].disabled when it changes.

answered Nov 4, 2020 at 12:24

Hannah

1,1436 silver badges5 bronze badges

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

1 Comment

Ronye Vernaes Over a year ago

I resolved with an event instead a watcher. But indeed the fact of I cannot use computed or other data members as values for data members, clarified me a lot... Thanks!

Collectives™ on Stack Overflow

Vue Component Button is not being disabled dynamically

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related