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.

Let’s start by creating a toggle component. Since the switch will toggle the edit mode, I will call the component 

. 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. 

 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 

 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 

We also add a click event listener that sends the value of 

, depending on if the checkbox is checked or not. When the toggle switch is active, the checkbox is checked.

---
title: Toggling edit mode
isPublicLesson: true
privateVideoUrl: https://stream.mux.com/00T0102sYSRA2FEZFDUd2qJmGSX63WgmvY1Km94iVctg3Q.m3u8
description: Create a Vue.js toggle switch component and toggle the edit mode in the resume builder app.
code: https://gitlab.com/fullstackio/books/newline-course-apps/katharina-spiecker-build-a-vuejs-resume-app/-/tree/main/lesson-7-starting-code?ref_type=heads
---

## 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

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](https://www.w3schools.com/howto/howto_css_switch.asp) 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`.

```html
<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.

```javascript
<script>
export default {
    methods: {
        onToggle(event) {
            this.$emit("editModeToggled", event.target.checked)
        }
    }
}
</script>
```

`event.target.checked` will contain `true` or `false`, depending on if the checkbox is checked or not. When the toggle switch is active, the checkbox is checked.

Now we are done with the `EditToggle` component, and we can take care of the necessary logic in the `App` component. We want to show or hide the edit buttons depending on whether the edit toggle is on or off. For that, we will add the property `editing` to the data object and set its default value to `true`.
We need to toggle this data property when we receive the event from the `EditToggle` component.
For that, we add an event listener that listens to the `editModeToggled` event.

Katharina

Create a Vue.js toggle switch component and toggle the edit mode in the resume builder app.

Toggling edit mode

All those edit buttons are a bit distracting.

we could hide them when edit mode is off.

The user could then look at their resume without distractions.

a data property in our app that tells us if edit mode is on or off,

is CSS class that gets added dynamically when the edit mode is off

Let's start by creating a toggle component.

Since the switch will toggle the edit mode,

First, we create the template of the component.

It is an input of type checkbox with adjusted styling.

There's quite a lot of CSS necessary to make a checkbox look like a toggle

so let's check if we can find something online that we can reuse here.

I found this tutorial from W3 Schools about how to create a toggle switch.

I will adjust the markup a bit so we can add label text within the label

It's a tutorial that you can use when you're using a toggle.

In our app component, we import and register the new component and add it at

We need to add a label to make it clear what this toggle switch is for.

Per default, we want the toggle to be on, so we add the attribute checked.

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

Event target checked will contain true or false depending on if the checkbox is

When the toggle switch is active, the checkbox is checked.

Now we are done with the added toggle component and we can take care of the

We want to show or hide the edit buttons depending on whether the added toggle

For that, we will add the property editing to the data object and set its

We need to toggle this data property when we receive the event from the added

For that, we add an event listener that listens to the added mode toggle event.

The event listener will have the added mode to the data object.

The event listener receives the Boolean value contained in event.target.checked

So we will call this argument "is checked".

In the event listener, we set the data property editing to the value of event

Depending on which value the editing property holds, we will hide or show the

In view, we can dynamically toggle classes.

For this, we use a dynamic class attribute with the vbind directive and then

So colon class as an abbreviated version.

colon class receives a JavaScript object that consists of a property and a

The property is the CSS class that should be applied if the value evaluates to

As you can see in this example, we use the dynamic class attribute side by side

When the data property editing is false, the class added off will be added

If editing is true, no class will be added.

This is what we want because the default should be added mode on.

If the user toggles it off, the class will be added to the outer wrapper of the

We can reference this class within the edit buttons component and hide the edit

We have successfully added the added toggle switch and are able to hide and

That is great and we are only missing one thing.

The text can currently be edited even though edit mode is off because every

text element has the content editable attribute equals to true.

We can easily change that by turning content editable into a dynamic attribute

I am using the search and replace feature here so I don't have to replace them

We are using the search and replace feature.

In the components we also turn content editable into a dynamic attribute.

By turning the props registration we previously created as an array into an

We can declare a default value just like we did in the edit buttons component.

Learn

The newline Guide to Building Your First GraphQL Server with Node and TypeScript

Teach

Amelia Wattenberger

Author of Fullstack D3

Community

Masterclasses

Tutorials

Fullstack React with TypeScript