A small Vue.js app

Disabling a button based on a condition

I have a button in my Vue app that will delete the object whose properties are currently displayed in the UI from the tiddlers array. If there isn’t an existing tiddler selected, the “Delete tiddler” button doesn’t do anything, and I would like it to be visibly disabled.

Goal

I’ll disable the “Delete tiddler” button when there isn’t an existing tiddler being edited/displayed in the UI.

Use Vue to disable the button when currentCreated is undefined

When a tiddler is selected, the data property currentTiddler gets populated with its properties, and currentCreated takes the value of its unique created property. Otherwise, currentCreated is undefined, which is a falsy value in JavaScript.

After a lot of steps focusing on adding methods to the Vue instance, I’m back to its template. Vue’s v-bind directive can bind the disabled attribute of the button to the condition that currentCreated is falsy:

<button id="delete-tiddler" :disabled="!currentCreated" @click="removeTiddler">Delete tiddler</button>

Note that :disabled is shorthand for v-bind:disabled.

In my CSS style file for the app, I add the line

button:disabled {
  color: #bbb;
}

to make sure the button is visibly disabled.

It would be equally simple to just not create the button when currentCreated is falsy, using the v-if Vue directive:

<button v-if="currentCreated" id="delete-tiddler" @click="removeTiddler">Delete tiddler</button>

The v-show directive could be used in place of v-if above; rather than not rendering the button at all like v-if, it would set its style inline to display: none when currentCreated is undefined.

The JS code: minapp_v14.js