Toggling edit mode

All those edit buttons are a bit distracting. If we could toggle edit mode on and off, we could hide them when edit mode is off. The user could then look at their resume without distractions.

For that, we will need three things:

1. A new toggle component

2. A data property in our app that tells us if edit mode is on or off

3. A CSS class that gets added dynamically when the edit mode is off so that we can hide all edit buttons

The code editor contains the final code from the previous lesson. Feel free to use it as a starting point to dive into this lesson.

Let’s start by creating a toggle component. Since the switch will toggle the edit mode, I will call the component EditToggle. First, we create the template of the component.

A toggle switch does not exist in HTML. It is an input of a type checkbox with adjusted styling. There is quite a lot of CSS necessary to make a checkbox look like a toggle switch, so let's check if we can find something online that we can reuse here.

I found this tutorial from w3schools about how to create a toggle switch. Let's copy over the code. I will adjust the markup a bit so that we can add a label text within the label element. In our App component, we import and register the new component and add it at the top, above the resume.

We need to add a label to make it clear what this toggle switch is for. Adding “Edit mode” should make it clear. Per default, we want the toggle to be on, so we add the attribute checked.

xxxxxxxxxx

<template>

  <label class="switch-wrapper">

    <div class="switch">

      <input type="checkbox" checked @click="onToggle">

      <span class="slider"></span>

    </div>

    <span>Edit mode</span>

  </label>

</template>

We also add a click event listener that sends the value of event.target.checked along.

xxxxxxxxxx

<script>

export default {

    methods: {

        onToggle(event) {

            this.$emit("editModeToggled", event.target.checked)

        }

    }

}

</script>