We have seen how to render data from the data object in the previous lesson. Now, we enable the user to change this data. We will learn two more directives in Vue: 

, with which we can display as well as edit input data.

 sets the value attribute of an input element to the value it is tied to. At the same time, if the user inputs something, this would overwrite the default value in the data object. This is often referred to as two-way data binding.

Without the v-model directive, we would do the data binding and the updating in two steps.

, we can retrieve the value from the data property and display it.

But we also want our input to get registered and update the state. For that, we would need an event listener that listens to the input event.
It should then update the value according to the input.

The way to add event listeners in Vue is with the 

, and then the event you want to listen to.
The value of this directive is the event handler.

When the user types or makes changes to the input's value, the "myEventHandler" method in your Vue component will be called. You can use this to capture the user's input, process it, and perform actions based on the changes in the input field.

 directive can be abbreviated with just a colon?
The 

Just like in Vanilla JavaScript, we can write the event listener inline if we want to. To update the value of the name property on input, we can use the following event handler:

<input :value="name" @input="event => name = event.target.value">

 directive is pretty neat and makes our life a lot simpler. It can be used on 

 elements. So, one approach would be to convert all of our text into input elements and take advantage of the ease of the 

Let’s test this out by converting the first headline into an input element.

Of course, we would have to change the styling of the input element for this to make it look like a headline again. For this, we could remove the background and the border. What we cannot fix is that an input element is only one line long. It cannot break and continue in the next line.

It is best to keep the non-input elements, so 

 on these non-input elements, but we can get the same functionality with v-bind and an event listener.

 to the heading and see what happens. A box renders around the text when we click on it. We can edit the text in the box, and if we hit enter, we see that the box would also span across lines. If we lose the focus, our input remains visible. The data object still needs to be updated.

I will show you what I mean. Let's print out the current value of headline one.

<div>current value of headline one: {{ headlines[0] }}</div>

You see, it does not get updated automatically. If we use an input element with 

<h4 class="section-headline" contenteditable="true">{{headlines[0]}}</h4>
<input v-model="headlines[0]">

 directive updates the data object. To achieve this functionality for our non-input elements, we need to add an event listener that updates the data property of the data object. As a reference point, this code is equivalent to 

---
title: Editing the resume content
isPublicLesson: true
privateVideoUrl: https://stream.mux.com/cc001qt1hNYVhsy8S02HXo31aiyfSuxYTC74q2rTpKGZU.m3u8
description: Make the resume content editable by learning the v-model and the v-on directive, methods, and how to handle events in Vue.js.
code: https://gitlab.com/fullstackio/books/newline-course-apps/katharina-spiecker-build-a-vuejs-resume-app/-/tree/main/lesson-4-starting-code?ref_type=heads
---

## Editing the resume content

We have seen how to render data from the data object in the previous lesson. Now, we enable the user to change this data. We will learn two more directives in Vue: `v-model` and `v-on`.

Vue provides a very useful directive, `v-model`, with which we can display as well as edit input data.

```html
<input v-model="name">
```

:::note

`v-model` sets the value attribute of an input element to the value it is tied to. At the same time, if the user inputs something, this would overwrite the default value in the data object. This is often referred to as two-way data binding.

:::

Without the v-model directive, we would do the data binding and the updating in two steps.

With `v-bind`, we can retrieve the value from the data property and display it.

```html
<input :value="name">
```

But we also want our input to get registered and update the state. For that, we would need an event listener that listens to the input event.
It should then update the value according to the input.

The way to add event listeners in Vue is with the `v-on` directive. You write `v-on:`, and then the event you want to listen to.
The value of this directive is the event handler.

```html
<input :value="name" v-on:input="myEventHandler">
```

When the user types or makes changes to the input's value, the "myEventHandler" method in your Vue component will be called. You can use this to capture the user's input, process it, and perform actions based on the changes in the input field.

Remember how the `v-bind` directive can be abbreviated with just a colon?
The `v-on` directive can be abbreviated with an `@` sign.

```html
<input :value="name" @input="myEventHandler">
```

Just like in Vanilla JavaScript, we can write the event listener inline if we want to. To update the value of the name property on input, we can use the following event handler:

```html
<input :value="name" @input="event => name = event.target.value">
```

The `v-model` directive is pretty neat and makes our life a lot simpler. It can be used on `input`, `textarea`, and `select` elements. So, one approach would be to convert all of our text into input elements and take advantage of the ease of the `v-model` directive.

Let’s test this out by converting the first headline into an input element.

```html
<input type="text" v-model="headlines[0]">
```

Of course, we would have to change the styling of the input element for this to make it look like a headline again. For this, we could remove the background and the border. What we cannot fix is that an input element is only one line long. It cannot break and continue in the next line.

It is best to keep the non-input elements, so `h4` in the case of the headlines, and add `contenteditable="true"` to it. We cannot use `v-model` on these non-input elements, but we can get the same functionality with v-bind and an event listener.

Let's add `contenteditable="true"` to the heading and see what happens. A box renders around the text when we click on it. We can edit the text in the box, and if we hit enter, we see that the box would also span across lines. If we lose the focus, our input remains visible. The data object still needs to be updated.

I will show you what I mean. Let's print out the current value of headline one.

```html
<div>current value of headline one: {{ headlines[0] }}</div>
```

You see, it does not get updated automatically. If we use an input element with `v-model`, it does update.

```html
<h4 class="section-headline" contenteditable="true">{{headlines[0]}}</h4>
<input v-model="headlines[0]">
```

That is because the `v-model` directive updates the data object. To achieve this functionality for our non-input elements, we need to add an event listener that updates the data property of the data object. As a reference point, this code is equivalent to `v-model`.

```html
<input :value="headlines[0]" @input="event => headlines[0] = event.target.value">
```

For a `non-input` element, the difference is that the text is not the `value` of the element but the `innerText`. Therefore, we need to access it with `event.target.innerText` instead of with `event.target.value`.

```html
<h4
  class="section-headline"
  contenteditable="true"
  @input="event => headlines[0] = event.target.innerText">
  {{ headlines[0] }}
</h4>
```

If you have the Vue Chrome extension installed, you can see the value update in there. As we can see, the data property updates.

Now that we have figured out how to edit the data while keeping the rendering of the non-input elements let's apply it to all headlines. Instead of repeating the inline event handler for each headline, moving this logic into a function makes sense. We do this in Vue by adding the [methods](https://vuejs.org/guide/essentials/reactivity-fundamentals.html#declaring-methods) property to the object. The methods property contains an object with methods. Our event handler should be placed in there.

Katharina

Make the resume content editable by learning the v-model and the v-on directive, methods, and how to handle events in Vue.js.

Editing the resume content

We have seen how to render data from the data object in a previous lesson.

Now we enable the user to change this data.

We will learn two more directives in view.

We model with which we can display as well as edit input data.

We model sets the value attribute of an input element to the value it is tied

At the same time, if the user inputs something,

this would override the default value and the data object.

This is often referred to as two-way data binding.

Without the vModel directive, we would do the data binding and the updating in

With vBind, we can retrieve the value from the data property and display it.

But we also want our input to get registered and update the state.

For that, we would need an event listener that listens to the input event.

It should then update the value according to the input.

The way to add event listeners in view.js is with a vOn directive.

You write vOn colon and then the event you want to listen to.

The value of this directive is the event handler.

When the user types or makes changes to the input's value,

the myEventHandler method, a new view component, will be called.

You can use this to capture the user's input,

process it, and perform actions based on the changes and the input field.

Remember how the vBind directive can be abbreviated with a colon?

The vOn directive can be abbreviated with an add sign.

Just like in vanilla JavaScript, we can write the event listener in line if we

To update the value of the name property on input, we can use the following

The vModel directive is pretty neat and makes our life a lot simpler.

It can be used on input, text, area, and select elements.

So one approach would be to convert all of our text into input elements

and take advantage of the ease of the vModel directive.

Let's test this out by converting the first headline into an input element.

Of course, we would have to change the styling of the input element

for this to make it look like a headline again.

For this, we could remove the background and the border.

What we cannot fix is that an input element is only one line known.

It cannot break and continue into the next line.

It is best to keep the non-input elements, so h4, in the case of headlines,

We cannot use vModel on these non-input elements,

but we can get the same functionality with vBind and an event listener.

Let's add content editable true to the heading and see what happens.

A box renders around the text when we click on it.

We can edit the text in the box, and if we hit enter,

we see that the box would also span across lines.

If we lose the focus, our input remains visible.

The data object still needs to be updated.

Let's print out the current value of headline 1.

You see, it does not get updated automatically.

If we use an input element with vModel, it does update.

That is because the vModel directive updates the data object.

To achieve this functionality for our non-input elements,

we need to add an event listener that updates the data property of the data

As a reference point, this code is equivalent to vModel.

For a non-input element, the difference is that the text is not the value of

Therefore, we need to access it with event.target.innerText instead of with

If you have the View Chrome extension installed, you can see the value update

As we can see, the data property updates.

Now that we have figured out how to edit the data by keeping the rendering of

Instead of repeating the inline event handler for each headline,

moving this logic into a function makes sense.

We do this in view by adding the methods property to the object.

The methods property contains an object with methods.

Our event handler should be placed in there.

In our method, we want to set the value of the specific headline to the inner

In the template, we will replace the inline handler and copy the same

To pass the event to the handler, you need to use view special event variable

$ sign event. In the declaration of the method, you can name the parameter

We only have to replace the in-next argument.

We also have to use the in-next argument.

Our data object has many properties that we want to be able to edit through the

Creating a method for each of them would be very tedious.

We will be able to use this method for the intro text, the name and the title.

We also have values that are nested deeper than one level.

The phone number, for example, is accessible via this.contact.phone.

Specific skill is accessible via this.skills, records and decks.

For these nested properties, we need a separate method.

We are only sometimes dealing with arrays. For example, the context section is

Therefore, I want to use general parameter names here.

With key one, we can access any property of the data object and with key two,

either access by index if the value is an array or by property name.

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