Vue conditional rendering: editing existing todos

We can start by creating a separate component to handle the editing functionality. In your components directory, create a new file called ToDoItemEditForm.vue. Copy the following code into that file:

<template>
  <form class="stack-small" @submit.prevent="onSubmit">
    <div>
      <label class="edit-label">Edit Name for &quot;{{label}}&quot;</label>
      <input
        :id="id"
        type="text"
        autocomplete="off"
        v-model.lazy.trim="newLabel" />
    </div>
    <div class="btn-group">
      <button type="button" class="btn" @click="onCancel">
        Cancel
        <span class="visually-hidden">editing {{label}}</span>
      </button>
      <button type="submit" class="btn btn__primary">
        Save
        <span class="visually-hidden">edit for {{label}}</span>
      </button>
    </div>
  </form>
</template>
<script>
  export default {
    props: {
      label: {
        type: String,
        required: true,
      },
      id: {
        type: String,
        required: true,
      },
    },
    data() {
      return {
        newLabel: this.label,
      };
    },
    methods: {
      onSubmit() {
        if (this.newLabel && this.newLabel !== this.label) {
          this.$emit("item-edited", this.newLabel);
        }
      },
      onCancel() {
        this.$emit("edit-cancelled");
      },
    },
  };
</script>
<style scoped>
  .edit-label {
    font-family: Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color: #0b0c0c;
    display: block;
    margin-bottom: 5px;
  }
  input {
    display: inline-block;
    margin-top: 0.4rem;
    width: 100%;
    min-height: 4.4rem;
    padding: 0.4rem 0.8rem;
    border: 2px solid #565656;
  }
  form {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
  }
  form > * {
    flex: 0 0 100%;
  }
</style>

This code sets up the core of the edit functionality. We create a form with an <input> field for editing the name of our to-do.

There is a "Save" button and a "Cancel" button:

• When the "Save" button is clicked, the component emits the new label via an item-edited event.
• When the "Cancel" button is clicked, the component signals this by emitting an edit-cancelled event.

Before we can add ToDoItemEditForm to our app, we need to make a few modifications to our ToDoItem component. Specifically, we need to add a variable to track if the item is being edited, and a button to toggle that variable. We'll also add a Delete button since deletion is closely related.

Update your ToDoItem's template as shown below.

<template>
  <div class="stack-small">
    <div class="custom-checkbox">
      <input
        type="checkbox"
        class="checkbox"
        :id="id"
        :checked="isDone"
        @change="$emit('checkbox-changed')" />
      <label :for="id" class="checkbox-label">{{label}}</label>
    </div>
    <div class="btn-group">
      <button type="button" class="btn" @click="toggleToItemEditForm">
        Edit <span class="visually-hidden">{{label}}</span>
      </button>
      <button type="button" class="btn btn__danger" @click="deleteToDo">
        Delete <span class="visually-hidden">{{label}}</span>
      </button>
    </div>
  </div>
</template>

We've added a wrapper <div> around the whole template for layout purposes.

We've also added "Edit" and "Delete" buttons:

• The "Edit" button, when clicked, will toggle displaying the ToDoItemEditForm component so we can use it to edit our todo item, via an event handler function called toggleToItemEditForm(). This handler will set an isEditing flag to true. To do that, we'll need to first define it inside our data() property.
• The "Delete" button, when clicked, will delete the todo item via an event handler function called deleteToDo(). In this handler we'll emit an item-deleted event to our parent component so the list can be updated.

Let's define our click handlers, and the necessary isEditing flag.

Add isEditing below your existing isDone data point:

data() {
  return {
    isDone: this.done,
    isEditing: false
  };
}

Now add your methods inside a methods property, right below your data() property:

methods: {
    deleteToDo() {
      this.$emit('item-deleted');
    },
    toggleToItemEditForm() {
      this.isEditing = true;
    }
  }

Now we have an isEditing flag that we can use to signify that the item is being edited (or not). If isEditing is true, we want to use that flag to display our ToDoItemEditForm instead of the checkbox. To do that, we'll use another Vue directive: v-if.

The v-if directive will only render a block if the value passed to it is truthy. This is similar to how an if statement works in JavaScript. v-if also has corresponding v-else-if and v-else directives to provide the equivalent of JavaScript else if and else logic inside Vue templates.

It's important to note that v-else and v-else-if blocks need to be the first sibling of a v-if/v-else-if block, otherwise Vue will not recognize them. You can also attach v-if to a <template> tag if you need to conditionally render an entire template.

Lastly, you can use a v-if + v-else at the root of your component to display only one block or another, since Vue will only render one of these blocks at a time. We'll do this in our app, as it will allow us to replace the code that displays our to-do item with the edit form.

First of all add v-if="!isEditing" to the root <div> in your ToDoItem component,

<div class="stack-small" v-if="!isEditing"></div>

Next, below that <div>'s closing tag add the following line:

<to-do-item-edit-form v-else :id="id" :label="label"></to-do-item-edit-form>

We also need to import and register the ToDoItemEditForm component, so we can use it inside this template. Add this line at the top of your <script> element:

import ToDoItemEditForm from "./ToDoItemEditForm";

And add a components property above the props property inside the component object:

components: {
  ToDoItemEditForm
},

Now, if you go to your app and click a todo item's "Edit" button, you should see the checkbox replaced with the edit form.

However, there's currently no way to go back. To fix that, we need to add some more event handlers to our component.

First, we need to add an itemEdited() method to our ToDoItem component's methods. This method should take the new item label as an argument, emit an itemEdited event to the parent component, and set isEditing to false.

Add it now, below your existing methods:

itemEdited(newLabel) {
  this.$emit('item-edited', newLabel);
  this.isEditing = false;
}

Next, we'll need an editCancelled() method. This method will take no arguments and just serve to set isEditing back to false. Add this method below the previous one:

editCancelled() {
  this.isEditing = false;
}

Last for this section, we'll add event handlers for the events emitted by the ToDoItemEditForm component, and attach the appropriate methods to each event.

Update your <to-do-item-edit-form></to-do-item-edit-form> call to look like so:

<to-do-item-edit-form
  v-else
  :id="id"
  :label="label"
  @item-edited="itemEdited"
  @edit-cancelled="editCancelled">
</to-do-item-edit-form>

Now we can toggle between the edit form and the checkbox. However, we haven't actually handled updating the ToDoItems array back in App.vue. To fix that, we need to listen for the item-edited event, and update the list accordingly. We'll also want to handle the delete event so that we can delete todo items.

Add the following new methods to your App.vue's component object, below the existing methods inside the methods property:

deleteToDo(toDoId) {
  const itemIndex = this.ToDoItems.findIndex((item) => item.id === toDoId);
  this.ToDoItems.splice(itemIndex, 1);
},
editToDo(toDoId, newLabel) {
  const toDoToEdit = this.ToDoItems.find((item) => item.id === toDoId);
  toDoToEdit.label = newLabel;
}

Next, we'll add the event listeners for the item-deleted and item-edited events:

• For item-deleted, you'll need to pass the item.id to the method.
• For item-edited, you'll need to pass the item.id and the special $event variable. This is a special Vue variable used to pass event data to methods. When using native HTML events (like click), this will pass the native event object to your method.

Update the <to-do-item></to-do-item> call inside the App.vue template to look like this:

<to-do-item
  :label="item.label"
  :done="item.done"
  :id="item.id"
  @checkbox-changed="updateDoneStatus(item.id)"
  @item-deleted="deleteToDo(item.id)"
  @item-edited="editToDo(item.id, $event)">
</to-do-item>

And there you have it — you should now be able to edit and delete items from the list!

This is great so far, but we've actually introduced a bug by adding in the edit functionality. Try doing this:

1. Check (or uncheck) one of the todo checkboxes.
2. Press the "Edit" button for that todo item.
3. Cancel the edit by pressing the "Cancel" button.

Note the state of the checkbox after you cancel — not only has the app forgotten the state of the checkbox, but the done status of that todo item is now out of whack. If you try checking (or unchecking) it again, the completed count will change in the opposite way to what you'd expect. This is because the isDone inside data is only given the value this.done on component load.

Fixing this is fortunately quite easy — we can do this by converting our isDone data item into a computed property — another advantage of computed properties is that they preserve reactivity, meaning (among other things) that their state is saved when the template changes like ours is now doing.

So, let's implement the fix in ToDoItem.vue:

1. Remove the following line from inside our data() property:

   js

   isDone: this.done,
   

2. Add the following block below the data() { } block:

   js

   computed: {
     isDone() {
       return this.done;
     }
   },
   

Now when you save and reload, you'll find that the problem is solved — the checkbox state is now preserved when you switch between todo item templates.

One of the most potentially confusing parts is the tangle of standard and custom events we've used to trigger all the interactivity in our app. To understand this better, it is a good idea to write out a flow chart, description, or diagram of what events are emitted where, where they are being listened for, and what happens as a result of them firing.

<to-do-form> listens for:

• todo-added event emitted by the onSubmit() method inside the ToDoForm component when the form is submitted. Result: addToDo() method invoked to add new todo item to the ToDoItems array.

<to-do-item> listens for:

• checkbox-changed event emitted by the checkbox <input> inside the ToDoItem component when it is checked or unchecked. Result: updateDoneStatus() method invoked to update done status of associated todo item.
• item-deleted event emitted by the deleteToDo() method inside the ToDoItem component when the "Delete" button is pressed. Result: deleteToDo() method invoked to delete associated todo item.
• item-edited event emitted by the itemEdited() method inside the ToDoItem component when the item-edited event emitted by the onSubmit() method inside the ToDoItemEditForm has been successfully listened for. Yes, this is a chain of two different item-edited events! Result: editToDo() method invoked to update label of associated todo item.

<form> listens for submit event. Result: onSubmit() method is invoked, which checks that the new label is not empty, then emits the todo-added event (which is then listened for inside App.vue, see above), and finally clears the new label <input>.

The <input> of type="checkbox" listens for change events. Result: checkbox-changed event emitted when the checkbox is checked/unchecked (which is then listened for inside App.vue; see above).

"Edit" <button> listens for click event. Result: toggleToItemEditForm() method is invoked, which toggles this.isEditing to true, which in turn displays the todo item's edit form on re-render.

"Delete" <button> listens for click event. Result: deleteToDo() method is invoked, which emits the item-deleted event (which is then listened for inside App.vue; see above).

<to-do-item-edit-form> listens for:

• item-edited event emitted by the onSubmit() method inside the ToDoItemEditForm component when the form is successfully submitted. Result: itemEdited() method is invoked, which emits the item-edited event (which is then listened for inside App.vue, see above), and sets this.isEditing back to false, so that the edit form is no longer shown on re-render.
• edit-cancelled event emitted by the onCancel() method inside the ToDoItemEditForm component when the "Cancel" button is clicked. Result: editCancelled() method is invoked, which sets this.isEditing back to false, so that the edit form is no longer shown on re-render.

<form> listens for submit event. Result: onSubmit() method is invoked, which checks to see if the new label value is not blank, and not the same as the old one, and if so emits the item-edited event (which is then listened for inside ToDoItem.vue, see above).

"Cancel" <button> listens for click event. Result: onCancel() method is invoked, which emits the edit-cancelled event (which is then listened for inside ToDoItem.vue, see above).

This article has been fairly intense, and we covered a lot here. We've now got edit and delete functionality in our app, which is fairly exciting. We are nearing the end of our Vue series now. The last bit of functionality to look at is focus management, or put another way, how we can improve our app's keyboard accessibility.

• Previous
• Overview: Understanding client-side JavaScript frameworks
• Next