Component state and rendering data from it

In the previous lesson, we have created the template structure for the resume. In Vue, you don't write data that might change hardcoded into the template. Instead, you capture the initial value in the component's reactive state and display this value to the template. Reactive because Vue reacts to any changes in this data by re-rendering the part of the component where this data is displayed. This way, you are dynamically displaying data. If the state changes, the template will automatically update.

In this lesson, we will get to know the data method that holds the component state and how one renders data in Vue. We will use this knowledge to eliminate the template's placeholders and move all the data to the component's state.

 component only contains a template and some styling. As a first step, we need to add a script section containing the component state. Let's look up the structure in the 

The script section defines a Vue component using the default export syntax from ES6. You can include an object with various component options in this script section. Among these options, one crucial method is called 

. The data method should be defined within this object, and it returns an object itself. This inner object is where you capture and store the reactive data for your component. In other words, the data method returns an object containing the initial state of the component, and Vue will automatically track any changes to this data for dynamic updates. Therefore, I will be referring to the reactive state of a component as the data object. Remember that it gets declared as a method with the name 

Let's start by moving the name, title, and intro text away from the template here. I will be using dummy data for this resume. You can use the same, make up different data, or use your own data.

Since the data object is just a JavaScript object, it can contain any data type that JavaScript objects can contain. I point this out because you can add attributes containing any 

 as well as attributes containing objects and arrays.

In order to render data in the template, we use the mustache syntax in Vue. The mustache syntax describes these two curly braces that would look like a mustache if turned 90 degrees.
They are responsible for printing out the reactive data. You reference this data in the template simply by using the property names.
Vue refers to the printing of dynamic data as 

<div class="personal-name">
  {{ name }}
</div>
<div class="personal-title">
  {{ title }}
</div>

<div class="resume-section">
  <h4 class="section-headline">
    About me
  </h4>
  <div>
    {{ introText }}
  </div>
</div>

Vue's reactivity system watches the values stored in the data object, and if anything changes, the associated template automatically updates. This reactivity of the DOM in regard to the data it contains is called 

. It eliminates the need for manual DOM manipulation, ensuring that your user interface remains synchronized with the underlying data.

. A JavaScript expression can be anything that resolves to a value. As you can see, if I type a simple arithmetic expression here, it gets printed out.

"Vue actually supports the full power of JavaScript expressions inside all data bindings."

In addition to text interpolation, Vue provides other forms of data binding. When you need to bind dynamic data to HTML attributes, you cannot use the mustache syntax. Instead, Vue offers the 

, you can dynamically set HTML attributes based on the component's data. For example, you can use 

 attribute of an image element or the href attribute of a link.

To demonstrate this, we are going to add a picture to our resume.

 which does not exist yet. First, you must add a picture to the public folder of the project's directory.
Next, you can reference the name of the image in the data object.

data() {
    return {
      ...
      imageUrl: "/profile_pic.jpg"
    }
}

You can see the image being displayed, but it needs some styling.

.profile-pic {
  display: block;
  width: 160px;
  height: 160px;
  border: 5px solid var(--highlight-color-left);
  margin-bottom: 20px;
  object-fit: cover;
  margin-left: auto;
  margin-right: auto;
  border-radius: 50%;
}

 infront of it. Vue provides a shortcut for the 

In many countries, adding a picture to the resume is common. We want to give users the option at least. Therefore, we added a placeholder image now and let the user replace or remove the image later on.

So far, we have moved two strings and the image path in the data object. Next, I will move all headlines into an array.

headlines: ["About me", "Contact", "Skills", "Certifications", "Experience", "Education"]

We render those headlines by accessing the index of the array.

<h4>{{ headlines[0] }}</h4>
...
<h4>{{ headlines[4] }}</h4>

To represent the contact data, we will add a property of the type object that holds the properties: 

contact: {
  phone: "15713909584",
  email: "contact@gmail.com",
  address: "Main St 100, 19777 NY"
}

To represent this data in the template, you just print out each property with the mustache syntax.

<ul class="contact">
  <li>
    {{ contact.phone }}
  </li>

  <li>
    {{ contact.email }}
  </li>

  <li>
    {{ contact.address }}
  </li>
</ul>

Next, we move all the skills into an array. Let's also add some more skills to the array.

skills: ["Python", "Pandas", "SQL", "R", "AI", "C++", "Machine Learning", "Hadoop", "TensorFlow", "PyTorch", "NLP"]

In Vue, we can render iterative data with the 

. You add the directive to the element you want repeated with each loop. We create a 

 element since we want to render the skills data as list elements. The 

. That way, we iterate over all each item in the array.

<li v-for="skill in skills">{{ skill }}</li>

 directive does not get added to the parent node (

, for example) but to the exact node you want to repeat with each loop iteration.

The current array item is then available within the element. That is why we can display the variable 

 would be available as a variable within the element.

What makes Vue.js so efficient is that once data changes, it only re-renders the part that is affected. In order to enable Vue to map the DOM elements with the correct item in the array, we have to pass a key attribute. You could use the index of the array item for this. Vue passes the index as a second argument to the 

 directive if we change the syntax to this.

Since the index is dependent on the current iteration, it is a dynamic value. So we don't just add the 

 attribute, but we bind the dynamic index variable to the key with v-bind. I am using the shortcut here.

<li v-for="(skill, index) in skills" :key="index">{{ skill }}</li>

By adding the key attribute, we have enabled Vue to create a unique reference to each node. You can read more about that 

The second I change an entry in the data object, the DOM element where the entry is rendered updates. We can also inspect the data contained in the component with the Vue extension in the browser. I am using Google Chrome here, with the 

 installed. If you open the dev tools, you will find a new entry called Vue. 
This tool shows you which components are present on the page and the data they contain. So far, we only have one component. You could edit the properties and watch how the page re-renders. Note that you can only use this extension when the app is not in production mode. The app is currently running in development mode, so it works.

We still need to move the experience and education sections into the data object. We will start with the experiences.
Since there can be more than one experience, we need an array of objects. Each experience needs a title, a company name, a location, and a date string.
Each experience will be an object with these properties. Additionally, each experience gets the property 

, which describes the experience further.
Let's populate this experience array with three experience objects.

experience: [
  {
    title: "Senior Data Scientist",
    company: "ABC Analytics Inc.",
    location: "London",
    date: "2022 - Present",
    description: [
      "Led a team of data scientists in developing advanced machine learning models for predictive analytics",
      "Designed and implemented a recommendation system that boosted cross-selling, leading to a 20% increase in revenue",
      "Conducted A/B testing and statistical analysis to optimize product features"
    ]
  },
  {
    title: "Data Scientist",
    company: "XYZ Data Solutions",
    location: "London",
    date: "2017 - 2019",
    description: [
      "Developed and deployed machine learning models for fraud detection, reducing fraudulent transactions by 18%",
      "Conducted in-depth exploratory data analysis to identify key trends and insights",
      "Worked on data preprocessing, feature engineering, and model selection to improve model performance"
    ]
  },
  {
    title: "Data Scientist Trainee",
    company: "Data Insights Ltd.",
    location: "New York City",
    date: "2016-2017",
    description: [
      "Collaborated with external partners to integrate third-party data sources, expanding the company's data assets and enhancing predictive modeling capabilities.",
      "Presented data-driven insights and recommendations to executive leadership, influencing strategic decisions and driving revenue growth."
    ]
  }
]

Now let's render the experiences from this array. We can use 

 here again. Each experience should be wrapped in a 

 directive so the code gets repeated for each item in the experience array. Inside this 

 variable will be available and we can access the current experience through this. Let’s add the title, the company name, the location, and the date.

<div v-for="(item, index) in experience" :key="index">
    <div>{{ item.title }}</div>
    <div>
      <div>{{ item.company }}, {{ item.location }}</div>
      <div>{{ item.date }}</div>
    </div>
    <ul>
      <li v-for="(desc, innerIndex) in item.description" :key="innerIndex">{{ desc }}</li>
    </ul>
</div>

We need to iterate through this inner array to display the description items. Remember to add the key here, as we have learned previously. For this, we want to use a different variable, 

, to avoid mixing up with the variable from the outer array. In between the 

 tags, we will print each description string.

Looking at the app in the browser, we notice that there is currently no distance between the individual entries. We need to apply 

 to each eduction entry. For that we add the class 

<div v-for="(item, index) in experience" :key="index" class="inner-section">
  <div>{{ item.title }}</div>
  <div>
    <div>{{ item.company }}, {{ item.location }}</div>
    <div>{{ item.date }}</div>
  </div>
  <ul>
    <li v-for="(desc, innerIndex) in item.description" :key="innerIndex">{{ desc }}</li>
  </ul>
</div>

.inner-section {
  margin-bottom: 20px;
}

To properly use the space and improve the resume layout, we want to align the company name, location, and date into the same row. We accomplish this by wrapping them in one parent 

 class. Now they are next to each other, but we want the date to be on the very right. We need to apply 

 to the parent element. Since we will be using this several times, I want to create the Bootstrap like class for this in the main.css file.

.justify-content-between {
    justify-content: space-between;
}

<div v-for="(item, index) in experience" :key="index" class="inner-section">
  <div>{{ item.title }}</div>
  <div class="d-flex justify-content-between">
    <div>{{ item.company }}, {{ item.location }}</div>
    <div>{{ item.date }}</div>
  </div>
  <ul>
    <li v-for="(desc, innerIndex) in item.description" :key="innerIndex">{{ desc }}</li>
  </ul>
</div>

The education part will be very similar to the experience part. An education object will need the following properties: title, university, location, date, and description. The description should be an array of strings highlighting some achievements or aspects of this education.

education: [
  {
    title: "Master of Science in Data Science",
    university: "StellarTech University",
    location: "Starville",
    date: "2020-2022",
    description: [
      "Coursework included advanced machine learning, statistical modeling, and data visualization techniques.",
      "Thesis: 'Predictive Modeling for Customer Churn in E-commerce using Random Forest.'"
    ]
  },
  {
    title: "Bachelor of Science in Computer Science",
    university: "Evergreen State University",
    location: "Springdale",
    date: "2012-2015",
    description: [
      "Relevant coursework in database management, algorithms, and programming languages.",
      "Senior project: 'Development of a Recommender System for Movie Ratings.'"
    ]
  }
]

Now all that is left is to replace the placeholder content for education with the actual data from the education data property. We follow the same layout that we have used for the experiences part. The only difference is that instead of 

<div v-for="(item, index) in education" :key="index">
  <div>{{ item.title }}</div>
  <div class="d-flex justify-content-between">
    <div>{{ item.university }}, {{ item.location }}</div>
    <div>{{ item.date }}</div>
  </div>
  <ul>
    <li v-for="(desc, innerIndex) in item.description" :key="innerIndex">{{ desc }}</li>
  </ul>
</div>

We wrap up this lesson about a component's reactive state and rendering data from it. In the next lesson, we will learn about how to make the content editable.

You can download the code for this lesson 

---
title: Component state and rendering data from it
isPublicLesson: true
privateVideoUrl: https://stream.mux.com/b9sEaugKQ4qL02D01NMOOYKviA008fNS02FE02U6Kx00B1i02U.m3u8
description: How to render data from component state. Learn about Vue.js directives, and reactive rendering.
code: https://gitlab.com/fullstackio/books/newline-course-apps/katharina-spiecker-build-a-vuejs-resume-app/-/tree/main/lesson-3-starting-code?ref_type=heads
---

## Component state and rendering data from it

In the previous lesson, we have created the template structure for the resume. In Vue, you don't write data that might change hardcoded into the template. Instead, you capture the initial value in the component's reactive state and display this value to the template. Reactive because Vue reacts to any changes in this data by re-rendering the part of the component where this data is displayed. This way, you are dynamically displaying data. If the state changes, the template will automatically update.

In this lesson, we will get to know the data method that holds the component state and how one renders data in Vue. We will use this knowledge to eliminate the template's placeholders and move all the data to the component's state.

So far, our `App` component only contains a template and some styling. As a first step, we need to add a script section containing the component state. Let's look up the structure in the [documentation](https://vuejs.org/guide/essentials/component-basics.html#defining-a-component).

```javascript
<script>
export default {
  data() {
    return {
      count: 0
    }
  }
}
</script>
```

The script section defines a Vue component using the default export syntax from ES6. You can include an object with various component options in this script section. Among these options, one crucial method is called `data`. The data method should be defined within this object, and it returns an object itself. This inner object is where you capture and store the reactive data for your component. In other words, the data method returns an object containing the initial state of the component, and Vue will automatically track any changes to this data for dynamic updates. Therefore, I will be referring to the reactive state of a component as the data object. Remember that it gets declared as a method with the name `data` that returns an object.

### Adding name, title, and intro text

Let's start by moving the name, title, and intro text away from the template here. I will be using dummy data for this resume. You can use the same, make up different data, or use your own data.

```javascript
<script>
export default {
  data() {
    return {
      name: "Michaela Scarn",
      title: "Senior Data Scientist",
      introText: "From data cleaning to data analysis to machine learning, I am passionate about everything data."
    }
  }
}
</script>
```

Since the data object is just a JavaScript object, it can contain any data type that JavaScript objects can contain. I point this out because you can add attributes containing any [primitive data type](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures?retiredLocale=de#primitive_values) as well as attributes containing objects and arrays.

In order to render data in the template, we use the mustache syntax in Vue. The mustache syntax describes these two curly braces that would look like a mustache if turned 90 degrees.
They are responsible for printing out the reactive data. You reference this data in the template simply by using the property names.
Vue refers to the printing of dynamic data as [text interpolation](https://vuejs.org/guide/essentials/template-syntax.html#text-interpolation).
We add the name and title.

```html
<div class="personal-name">
  {{ name }}
</div>
<div class="personal-title">
  {{ title }}
</div>
```

In the 'About me' section, we add the `introText`.

```html
<div class="resume-section">
  <h4 class="section-headline">
    About me
  </h4>
  <div>
    {{ introText }}
  </div>
</div>
```

Vue's reactivity system watches the values stored in the data object, and if anything changes, the associated template automatically updates. This reactivity of the DOM in regard to the data it contains is called `data binding`. It eliminates the need for manual DOM manipulation, ensuring that your user interface remains synchronized with the underlying data.

The mustache syntax can also contain a [JavaScript expression](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators?retiredLocale=de#). A JavaScript expression can be anything that resolves to a value. As you can see, if I type a simple arithmetic expression here, it gets printed out.

```html
<div>{{ 1 + 1 }}</div>
```

As the [Vue documentation](https://vuejs.org/guide/essentials/template-syntax.html#using-javascript-expressions) states:

> "Vue actually supports the full power of JavaScript expressions inside all data bindings."

### Adding the image

In addition to text interpolation, Vue provides other forms of data binding. When you need to bind dynamic data to HTML attributes, you cannot use the mustache syntax. Instead, Vue offers the [v-bind directive](https://vuejs.org/guide/essentials/template-syntax.html#attribute-bindings) for this purpose. With `v-bind`, you can dynamically set HTML attributes based on the component's data. For example, you can use `v-bind` to set the `src` attribute of an image element or the href attribute of a link.

To demonstrate this, we are going to add a picture to our resume.

```html
<img v-bind:src="imageUrl" class="profile-pic" alt="profile picture">
```

The dynamic `src` attribute now references `imageUrl` which does not exist yet. First, you must add a picture to the public folder of the project's directory.
Next, you can reference the name of the image in the data object.

```javascript
data() {
    return {
      ...
      imageUrl: "/profile_pic.jpg"
    }
}
```

You can see the image being displayed, but it needs some styling.

```css
.profile-pic {
  display: block;
  width: 160px;
  height: 160px;
  border: 5px solid var(--highlight-color-left);
  margin-bottom: 20px;
  object-fit: cover;
  margin-left: auto;
  margin-right: auto;
  border-radius: 50%;
}
```

We made the `src` attribute dynamic by adding `v-bind:` infront of it. Vue provides a shortcut for the `v-bind directive`. Instead of `v-bind:` you can just write a colon.

```html
<img :src="imageUrl" class="profile-pic" alt="profile picture">
```

In many countries, adding a picture to the resume is common. We want to give users the option at least. Therefore, we added a placeholder image now and let the user replace or remove the image later on.

So far, we have moved two strings and the image path in the data object. Next, I will move all headlines into an array.

### Adding the headlines

```javascript
headlines: ["About me", "Contact", "Skills", "Certifications", "Experience", "Education"]
```

We render those headlines by accessing the index of the array.

```html
<h4>{{ headlines[0] }}</h4>
...
<h4>{{ headlines[4] }}</h4>
```

### Adding the contact section

To represent the contact data, we will add a property of the type object that holds the properties: `phone`, `email`, and `address`.

```javascript
contact: {
  phone: "15713909584",
  email: "contact@gmail.com",
  address: "Main St 100, 19777 NY"
}
```

To represent this data in the template, you just print out each property with the mustache syntax.

```html
<ul class="contact">
  <li>
    {{ contact.phone }}
  </li>

  <li>
    {{ contact.email }}
  </li>

  <li>
    {{ contact.address }}
  </li>
</ul>
```

### Adding the skills section

Next, we move all the skills into an array. Let's also add some more skills to the array.

```javascript
skills: ["Python", "Pandas", "SQL", "R", "AI", "C++", "Machine Learning", "Hadoop", "TensorFlow", "PyTorch", "NLP"]
```

In Vue, we can render iterative data with the `v-for` directive. You can think about it as a `for loop`. You add the directive to the element you want repeated with each loop. We create a `li` element since we want to render the skills data as list elements. The `li` element gets the Vue directive `v-for=“skill in skills”`. That way, we iterate over all each item in the array.

```html
<li v-for="skill in skills">{{ skill }}</li>
```

The `v-for` directive does not get added to the parent node (`ul`, for example) but to the exact node you want to repeat with each loop iteration.

The current array item is then available within the element. That is why we can display the variable `skill`. So if we were to write `v-for=“test in skills”`, the `test` would be available as a variable within the element.

What makes Vue.js so efficient is that once data changes, it only re-renders the part that is affected. In order to enable Vue to map the DOM elements with the correct item in the array, we have to pass a key attribute. You could use the index of the array item for this. Vue passes the index as a second argument to the `v-for` directive if we change the syntax to this.

```html
v-for="(skill, index) in skills"
```

Since the index is dependent on the current iteration, it is a dynamic value. So we don't just add the `key` attribute, but we bind the dynamic index variable to the key with v-bind. I am using the shortcut here.

```html
<li v-for="(skill, index) in skills" :key="index">{{ skill }}</li>
```

By adding the key attribute, we have enabled Vue to create a unique reference to each node. You can read more about that [here](https://vuejs.org/guide/essentials/list.html#maintaining-state-with-key).

The second I change an entry in the data object, the DOM element where the entry is rendered updates. We can also inspect the data contained in the component with the Vue extension in the browser. I am using Google Chrome here, with the [Vue.js devtools extension](https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd) installed. If you open the dev tools, you will find a new entry called Vue. 
This tool shows you which components are present on the page and the data they contain. So far, we only have one component. You could edit the properties and watch how the page re-renders. Note that you can only use this extension when the app is not in production mode. The app is currently running in development mode, so it works.

### Adding the experience section

We still need to move the experience and education sections into the data object. We will start with the experiences.
Since there can be more than one experience, we need an array of objects. Each experience needs a title, a company name, a location, and a date string.
Each experience will be an object with these properties. Additionally, each experience gets the property `description`, which describes the experience further.
Let's populate this experience array with three experience objects.

```javascript
experience: [
  {
    title: "Senior Data Scientist",
    company: "ABC Analytics Inc.",
    location: "London",
    date: "2022 - Present",
    description: [
      "Led a team of data scientists in developing advanced machine learning models for predictive analytics",
      "Designed and implemented a recommendation system that boosted cross-selling, leading to a 20% increase in revenue",
      "Conducted A/B testing and statistical analysis to optimize product features"
    ]
  },
  {
    title: "Data Scientist",
    company: "XYZ Data Solutions",
    location: "London",
    date: "2017 - 2019",
    description: [
      "Developed and deployed machine learning models for fraud detection, reducing fraudulent transactions by 18%",
      "Conducted in-depth exploratory data analysis to identify key trends and insights",
      "Worked on data preprocessing, feature engineering, and model selection to improve model performance"
    ]
  },
  {
    title: "Data Scientist Trainee",
    company: "Data Insights Ltd.",
    location: "New York City",
    date: "2016-2017",
    description: [
      "Collaborated with external partners to integrate third-party data sources, expanding the company's data assets and enhancing predictive modeling capabilities.",
      "Presented data-driven insights and recommendations to executive leadership, influencing strategic decisions and driving revenue growth."
    ]
  }
]
```

Now let's render the experiences from this array. We can use `v-for` here again. Each experience should be wrapped in a `div`. On that div we need to add the `v-for` directive so the code gets repeated for each item in the experience array. Inside this `div`, the `item` variable will be available and we can access the current experience through this. Let’s add the title, the company name, the location, and the date.

```html
<div v-for="(item, index) in experience" :key="index">
    <div>{{ item.title }}</div>
    <div>
      <div>{{ item.company }}, {{ item.location }}</div>
      <div>{{ item.date }}</div>
    </div>
    <ul>
      <li v-for="(desc, innerIndex) in item.description" :key="innerIndex">{{ desc }}</li>
    </ul>
</div>
```

We need to iterate through this inner array to display the description items. Remember to add the key here, as we have learned previously. For this, we want to use a different variable, `innerIndex`, to avoid mixing up with the variable from the outer array. In between the `li` tags, we will print each description string.

```html
<li v-for="(desc, innerIndex) in item.description" :key="innerIndex">{{ desc }}</li>
```

Looking at the app in the browser, we notice that there is currently no distance between the individual entries. We need to apply `margin-bottom` to each eduction entry. For that we add the class `inner-section` to the wrapper `div`.

```html
<div v-for="(item, index) in experience" :key="index" class="inner-section">
  <div>{{ item.title }}</div>
  <div>
    <div>{{ item.company }}, {{ item.location }}</div>
    <div>{{ item.date }}</div>
  </div>
  <ul>
    <li v-for="(desc, innerIndex) in item.description" :key="innerIndex">{{ desc }}</li>
  </ul>
</div>
```

```css
.inner-section {
  margin-bottom: 20px;
}
```

To properly use the space and improve the resume layout, we want to align the company name, location, and date into the same row. We accomplish this by wrapping them in one parent `div` and adding our previously created `d-flex` class. Now they are next to each other, but we want the date to be on the very right. We need to apply `justify-content: space-between;` to the parent element. Since we will be using this several times, I want to create the Bootstrap like class for this in the main.css file.

```css
.justify-content-between {
    justify-content: space-between;
}
```

```html
<div v-for="(item, index) in experience" :key="index" class="inner-section">
  <div>{{ item.title }}</div>
  <div class="d-flex justify-content-between">
    <div>{{ item.company }}, {{ item.location }}</div>
    <div>{{ item.date }}</div>
  </div>
  <ul>
    <li v-for="(desc, innerIndex) in item.description" :key="innerIndex">{{ desc }}</li>
  </ul>
</div>
```

### Adding the education section

The education part will be very similar to the experience part. An education object will need the following properties: title, university, location, date, and description. The description should be an array of strings highlighting some achievements or aspects of this education.

```javascript
education: [
  {
    title: "Master of Science in Data Science",
    university: "StellarTech University",
    location: "Starville",
    date: "2020-2022",
    description: [
      "Coursework included advanced machine learning, statistical modeling, and data visualization techniques.",
      "Thesis: 'Predictive Modeling for Customer Churn in E-commerce using Random Forest.'"
    ]
  },
  {
    title: "Bachelor of Science in Computer Science",
    university: "Evergreen State University",
    location: "Springdale",
    date: "2012-2015",
    description: [
      "Relevant coursework in database management, algorithms, and programming languages.",
      "Senior project: 'Development of a Recommender System for Movie Ratings.'"
    ]
  }
]
```

Now all that is left is to replace the placeholder content for education with the actual data from the education data property. We follow the same layout that we have used for the experiences part. The only difference is that instead of `item.company` we print `item.university`.

```html
<div v-for="(item, index) in education" :key="index">
  <div>{{ item.title }}</div>
  <div class="d-flex justify-content-between">
    <div>{{ item.university }}, {{ item.location }}</div>
    <div>{{ item.date }}</div>
  </div>
  <ul>
    <li v-for="(desc, innerIndex) in item.description" :key="innerIndex">{{ desc }}</li>
  </ul>
</div>
```

We wrap up this lesson about a component's reactive state and rendering data from it. In the next lesson, we will learn about how to make the content editable.

:::note
You can download the code for this lesson [here](https://github.com/katharina-spiecker/vue-resume-app-course/releases/tag/lesson-3).
:::


Katharina

How to render data from component state. Learn about Vue.js directives, and reactive rendering.

In the previous lesson, we have created the template structure for the resume.

you don't write data that might change hard-coded into the template. Instead,

you capture the initial value in the component's reactive state and display

template. Reactive because view reacts to any changes in this data by re-render

the component where this data is displayed. This way, you are dynamically

If the state changes, the template will automatically update. In this lesson,

we will get to know the data method that holds the component state and how one

view. We will use this knowledge to eliminate the template's placeholders and

to the component's state. So far, our app component only contains a template

As a first step, we need to add a script section containing the component state

Let's look up the structure in the documentation. The script section defines a

using the default export syntax from ES6. You can include an object with

in the script section. Among these options, one crucial method is called data.

should be defined within this object and it returns an object itself. This in

you capture and store the reactive data for your component. In other words, the

returns an object containing the initial state of the component and view will

any changes to this data for dynamic updates. Therefore, I will be referring to

state of a component as the data object. Remember that it gets declared as a

an object. Let's start by moving the name, title and intro text away from the

I will be using dummy data for this resume. You can use the same makeup

data. Since this object is just a JavaScript object, it can contain any data

JavaScript objects can contain. I point this out because you can add attributes

primitive data type as well as attributes containing objects and arrays. In

the template, we use the mustache syntax in view. The mustache syntax describes

that would look like a mustache if turned 90 degrees.

They are responsible for printing out the reactive data. You reference this

simply by using the property names. View refers to this printing of dynamic

as text interpolation. We add the name and title. In the about me section,

we add the intro text. Use reactivity system watches the value start and the

and if anything changes, the associated template automatically updates. This

DOM in regard to the data it contains is called data binding. It eliminates the

DOM manipulation. The mustache syntax can also contain a JavaScript expression.

expression can be anything that reserves to a value. As you can see, if I type

arithmetic expression here, it gets printed out as the view documentation

View actually supports the full power of JavaScript expressions inside all data

In addition to the text interpolation, view provides other forms of data

When you need to bind dynamic data to HTML attributes, you cannot use the

mustache syntax. Instead, view offers the vbind directive for this purpose.

With vbind, you can dynamically set HTML attributes based on the components

For example, you can use vbind to set the source attribute of an image element

href attribute of a link. To demonstrate this, we are going to add a picture to

First, you must add a picture to the public folder of the project's directory.

Next, you can reference the name of the image in the data object.

The dynamic source attribute now references image URL.

We made the source attribute dynamic by adding vbind in front of it.

View provides a shortcut for the vbind directive. Instead of vbind, you can

In many countries, adding a picture to the resume is common.

We want to give users the option at least. Therefore, we added a placeholder

and let the user replace or remove the image later on.

So far, we have moved two strings and the image pass and the data object.

Next, I will move all headlines into an array.

To represent the contact data, we will add a property of the type object that

property's phone, email, and address. To represent the data in the template,

you just print out each property with the message syntax.

Next, we move all the skills into an array. Let's also add some more skills to

In view, we can render iterative data with the v4 directive. You can think

You add the directive to the element you want to repeat it with each loop.

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