So far, we have enabled the user to change the text anywhere in the resume, but what if the user wants to add a skill to the resume? Or remove one?

For that, we want to add buttons below each 

 element that let the user add or remove list entries. Let's create an EditButtons component for that. We want our component to be called 

.
Let's add two buttons in the template, one with a plus and one with a minus. Each button will get two classes, a general 

 class, and an add or remove specific class so that we can apply a different color.

In order to see the buttons in the resume, we have to import and register the EditButtons component in the 

 component. Let's only add it underneath the list of items in the skills section for now.

Now, we need to add the logic in this component. If the user clicks a button, we must notify the 

 component to adjust the data.
We can apply what we have learned from the 

 component here. We add a click event listener, emit a custom event,
and add an event listener that listens for the custom event in the parent component. 

Let´s take care of emitting the event first. Since a click on the add or the remove button will trigger completely different actions, we need to emit two different events.

 component, we will listen to these events and execute an event handler.
What we want in the add method is that a new entry get pushed to the skills array.
In the remove handler, we want to remove the last entry of the array, which we do with the pop function.

We will do the same in the highlights section.

The description items in the experience and education sections are also arrays, so we can push a “new entry” string or delete the last item in the array here as well. Since experience and education itself are arrays, we first have to locate the correct entry. If we add the EditButtons component in the 

 iteration, the buttons will be rendered in each iteration, and we can access the index from there.

Alternatively, we can access the correct entry with the 

 variable that we made available in each iteration. This points to the current entry and is shorter than accessing via array and index.

Let's test it all out in the browser. Great! The only thing that seems weird is that the remove button is still shown, even when there is no entry left to remove.

 component about whether or not the array contains at least one entry and, based on that, display the remove button or not.

 to the component. The expression checks if the array length is bigger than zero and will therefore evaluate to either true or false. 

 component, we have to explicitly declare it again in the props array, just like we did in the 

In order to only show the button conditionally, we can use the 

 directive gets added to an element and determines whether it gets rendered or not.
This is referred to as 

 in Vue.
If the directive evaluates to a 

 value (in our case, it evaluates to either 

---
title: Adding and removing entries
isPublicLesson: true
privateVideoUrl: https://stream.mux.com/K2B702Ve3SM6IV2Yb6BWnIhfz18hY4kqFoJ2RiTnt02jE.m3u8
description: Add and remove resume entries dynamically by learning how to work with arrays in Vue.js. Learn about conditional rendering with the v-if directive.
code: https://gitlab.com/fullstackio/books/newline-course-apps/katharina-spiecker-build-a-vuejs-resume-app/-/tree/main/lesson-6-starting-code?ref_type=heads
---

## Adding and removing entries

So far, we have enabled the user to change the text anywhere in the resume, but what if the user wants to add a skill to the resume? Or remove one?

For that, we want to add buttons below each `ul` element that let the user add or remove list entries. Let's create an EditButtons component for that. We want our component to be called `EditButtons`, so we create a file called `EditButtons.vue`.
Let's add two buttons in the template, one with a plus and one with a minus. Each button will get two classes, a general `edit-btn` class, and an add or remove specific class so that we can apply a different color.

In order to see the buttons in the resume, we have to import and register the EditButtons component in the `App` component. Let's only add it underneath the list of items in the skills section for now.

Now, we need to add the logic in this component. If the user clicks a button, we must notify the `App` component to adjust the data.
We can apply what we have learned from the `SectionHeadline` component here. We add a click event listener, emit a custom event,
and add an event listener that listens for the custom event in the parent component. 

Let´s take care of emitting the event first. Since a click on the add or the remove button will trigger completely different actions, we need to emit two different events.

```html
<template>
    <div class="button-wrapper">
        <button class="edit-btn edit-btn-add" @click="$emit('addClick')">+</button>
        <button class="edit-btn edit-btn-remove" @click="$emit('removeClick')">-</button>
    </div>
</template>
```

In the `App` component, we will listen to these events and execute an event handler.
What we want in the add method is that a new entry get pushed to the skills array.
In the remove handler, we want to remove the last entry of the array, which we do with the pop function.

```html
<ResumeSection>
  ...
  <EditButtons @add-click="skills.push('new entry')" @remove-click="skills.pop()"/>
</ResumeSection>
```

We will do the same in the highlights section.

```html
<EditButtons
  @add-click="highlights.push('new entry')"
  @remove-click="highlights.pop()"
/>
```

The description items in the experience and education sections are also arrays, so we can push a “new entry” string or delete the last item in the array here as well. Since experience and education itself are arrays, we first have to locate the correct entry. If we add the EditButtons component in the `v-for` iteration, the buttons will be rendered in each iteration, and we can access the index from there.

```html
<div v-for="(item, index) in experience" :key="index">
  ...
  <EditButtons
    @add-click="experience[index].description.push('new entry')"
    @remove-click="experience[index].description.pop()"
  />
</div>
```

Alternatively, we can access the correct entry with the `item` variable that we made available in each iteration. This points to the current entry and is shorter than accessing via array and index.

Let's test it all out in the browser. Great! The only thing that seems weird is that the remove button is still shown, even when there is no entry left to remove.

We can inform the `EditButtons` component about whether or not the array contains at least one entry and, based on that, display the remove button or not.

For that, we pass the prop `showRemoveBtn` to the component. The expression checks if the array length is bigger than zero and will therefore evaluate to either true or false. `EditButtons` receives this boolean.

```html
<EditButtons
	@add-click="skills.push('new entry')"
	@remove-click="skills.pop()"
	:showRemoveBtn="skills.length > 0"
/>
```

To make the prop available in the `EditButtons` component, we have to explicitly declare it again in the props array, just like we did in the `SectionHeadline` component.

```javascript
<script>
    export default {
        props: ["showRemoveBtn"]
    }
</script>
```

In order to only show the button conditionally, we can use the `v-if` directive within the `EditButtons` component.

The `v-if` directive gets added to an element and determines whether it gets rendered or not.
This is referred to as [conditional rendering](https://vuejs.org/guide/essentials/conditional.html) in Vue.
If the directive evaluates to a `truthy` value (in our case, it evaluates to either `true` or `false`), the element gets rendered.

```html
<button
	v-if="showRemoveBtn"
	class="edit-btn edit-btn-remove"
	@click="$emit('removeClick')">
</button>
```

When using `v-if`, you can also use `v-else` on the following element. This element only gets rendered if the `v-if` directive evaluates to `false`.
The element must follow directly, though there can be no element in between.

```html
<button
	v-if="showRemoveBtn"
	class="edit-btn edit-btn-remove"
	@click="$emit('removeClick')">
  -
</button>
<div v-else>No items left to remove</div>
```

Let’s remove this last `div` again because the lack of a remove button is pretty self-explanatory. I just wanted to demonstrate `v-else` because there are many
cases where you will want to use it.

We are able to add and remove the items in the skills, highlights, experience description, and education description section.
What needs to be added is that we also need to be able to add or remove an entire experience or education entry, not just from the description part.

Katharina

Add and remove resume entries dynamically by learning how to work with arrays in Vue.js. Learn about conditional rendering with the v-if directive.

Adding and removing entries

So far, we have enabled the user to change the text anywhere in the resume.

But what if the user wants to add a skill to the resume or remove one?

For that, we want to add buttons below each list or unordered list element,

that let the user add or remove list entries.

Let's create an edit buttons component for that.

We want our component to be called edit buttons, so we create a file called

Let's add two buttons in the template, one with a plus and one with a minus.

Each button will get two classes, a general edit button class, and an add or

remove specific class, so we can apply a different color.

In order to see the buttons in the resume, we have to import and register the

editbuttons component and the app component.

Let's only add an underneath the list of items in the skills section for now.

Now, we need to add the logic in this component.

If the user clicks a button, we must notify the app component to adjust the

We can apply what we have learned from the section headline component here.

We add a click event listener, emit a custom event, and add an event listener

that listens to the custom event and the parent component.

Let's take care of emitting the event first.

Since a click on the add or remove button will trigger completely different

actions, we need to emit two different events.

In the app component, we will listen to these events and execute an event

What we want in the add method is that a new entry gets pushed to the skills

In the remove handler, we want to remove the last entry of the array, which we

description items in the experience and education sections are also arrays, so

we can push a new entry string or delete the last item in the array here as

Since experience and education itself are arrays, we first have to locate the

If we add the added buttons component in the V4 iteration, the buttons will be

rendered in each iteration and we can access the index from there.

We will be able to select the index from the original version of the file.

Alternatively, we can access the correct entry with the item variable that we

This points to the current entry and is shorter than accessing via array and

Great, the only thing that seems weird is that the remove button is still shown

even when there is no entry left to remove.

We can inform the added buttons component about whether or not the array

contains at least one entry and based on that, display the remove button or not

For that, we pass the prop/show/remove button to the component.

The expression checks if the array length is bigger than 0 and will therefore

To make the prop available in the edit buttons component, we have to explicitly

declare it again in the props array, just like we did with the section head

In order to only show the button conditionally, we can use the vif directive

The vif directive gets added to an element and determines whether it gets

This is referred to as conditional rendering in view.

If the directive evaluates to true C value, in our case it evaluates to either

true or false, the element gets rendered.

When using vif, you can also use vids on the following element.

This element only gets rendered if the vif directive evaluates to false.

The element must follow directly though. There can be no element in between.

Let's remove the last div again because the lack of a remove button is pretty

I just wanted to demonstrate vids because there are many cases where you will

We are able to add and remove the items and the skills, highlights, experience

description and education description section.

What needs to be added is that we also need to be able to add or remove an

entire experience or education entry, not just from the description part.

For default, we gave the user three experience entries into education entries.

We can start by adding the methods. We create one add experience method and one

Each of these methods should add an object with placeholder data to the

Since experience and education should appear in descending order, in other

words, with the most current one first, we need to add the new entry to the

We use the array method unshift here in order to insert the new object at the

We can reuse the added buttons component here. I want to place the add button

right next to the headline of the experience and education section.

In order to place the button directly next to the headline, we wrap both in a

We don't want the remove button here, so we pass in false for the show remove

prop. We use the same add click custom event here as before and use our add

Let's do the same for the education section.

By testing it in the browser, you can see that it works.

We also want to wait to delete entries from the experience and education

section. One option would be to add the remove button next to the add button

and then either delete the last entry or the first entry.

With adding an entry, it was clear that the user needed to add a new entry to

the beginning of the array. When deleting an entry, however, it needs to be

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