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

  1. Add a data property called currentCreated to keep track of the tiddler being viewed/edited (if any) by its created time.
  2. Add an event listener and a method (selectTiddler()), to retrieve the tiddler from the tiddlers 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.