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