CODEWITHSUNDEEP
vue.jsvue-component
Ronye Vernaes
Ronye Vernaes

Reputation: 2453

Vue Component Button is not being disabled dynamically

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.

Upvotes: 0

Views: 531

Answers (1)

Hannah
Hannah

Reputation: 1143

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.

Upvotes: 1

Related Questions