A small Vue.js app
Retrieving an object from an array
I’m writing a Vue.js app that’s essentially the ubiquitous to-do-list exercise, with the brilliant twist that the list items are called “tiddlers” after the units of content in TiddlyWiki.
The app can take text and tags as user input and store them in an array of objects called tiddlers
. Each object is timestamped on submission. Thus far, there’s no way to access them again once they have been stored.
Goal
To add the ability to retrieve a tiddler’s properties from the tiddlers
array into the user interface for display or editing.
Breakdown
- Add a
data
property calledcurrentCreated
to keep track of the tiddler being viewed/edited (if any) by itscreated
time. - Add an event listener and a method (
selectTiddler()
), to retrieve the tiddler from thetiddlers
array when its UI button is clicked
1. Add a currentCreated
property to the Vue instance’s data
To keep track of which object from tiddlers
the app is displaying, I’ll want to make a note of which one it is in the array. I’ll use its created time, which is (or ought to be) unique. To store this value, I define a property called currentCreated
.
data: {
//...
currentCreated: undefined,
//...
},
It’s initialized to undefined
, because on page load, no tiddler is selected.
2. Write a method to retrieve the tiddler from the tiddlers
array when its button is clicked (and add a listener to the button in the template
, to invoke it)
I’ll call it selectTiddler()
. In this case, “selecting” a tiddler means to display its properties in the UI of the app, so they can be viewed and/or edited. At the moment, I only deal with the text
and tags
properties, but can easily add more as needed.
When a tiddler is selected, the method also assigns a value to currentCreated
.
selectTiddler(tiddler) {
this.currentTiddler = JSON.parse(JSON.stringify(tiddler))
this.currentCreated = tiddler.created
},
I’m using the JSON.parse(JSON.stringify())
trick again, to make a new copy of the tiddler
object.
If I’d said this.currentTiddler = tiddler
, then if, for example, I removed a tag from currentTiddler.tags
with the removeTag
button, it would also be deleted from the tiddler
object. If, using Vue devtools, I deleted a tag from the tiddler in the tiddlers
array, it would disappear from currentTiddler.tags
too. This would be acceptable, actually, if I wanted changes to be committed instantly, but I don’t want edits to a tiddler to be made permanent until the user hits “Submit”.
Add the listener to the button so I can invoke the selectTiddler()
method:
//...
<button class="button-tiddler-select" @click="selectTiddler(tiddler)">{{tiddler.text}}</button>
//...
Link to current state of the .js
file: minapp_v10.js
Now, when we click on a tiddler from the list, its text
and tags
appear again in the app and we can change them – and submit it again as a new tiddler, with a new created
time! This will be fixed in the next step, as I implement the updating of an edited tiddler within the tiddlers
array.