Mini Challenge- Dynamic Links Solution

A little HTML, CSS, & JavaScript knowledge if recommended for this course.

To follow along, the starter folder is located in The Vue instance lesson.

Recap

Hopefully you had success re-creating the navigation links!

If you did not manage to complete, don't worry. This is all about gaining practice and experience. This lesson contains a solution to the challenge. There is no right or wrong way to do this, this is just one way.

Solution

Step 1 was to create an array of objects:

// script.js
const links = [
  { id: 1, name: "home", url: "index.html" },
  { id: 2, name: "portfolio", url: "portfolio.html" },
  { id: 3, name: "contact me", url: "contact.html" },
];

And then set this to our links data property:

Vue.createApp({
    data() {
        return {
            name: "Homer Simpson",
            links, // link to above array

You can also directly pass the array into the data property if you prefer.

The next steps were inside the index.html. Loop over the array and add a :key attribute:

<nav>
  <ul>
    <li v-for="link in links" :key="link.id">{{link}}</li>
  </ul>
</nav>

Finally, step 4 is to use the <a> element to create a dynamic link to the name property:

<li v-for="link in links" :key="link.id">
  <a :href="link.url">{{link.name}}</a>
</li>

This is the challenge now complete!

Mini Challenge: Dynamic Links JavaScript Expressions

Recap

Solution