Mini Challenge- Dynamic Links

The Objective

This lesson contains a mini challenge to test what you have learned so far.

The objective is to make our header links work when clicked on. Currently, these are just the text of 'home', 'portfolio', and 'contact me' from our links array:

Vue.createApp({
    data() {
        return {
            name: "Homer Simpson",
            links: ["home", "portfolio", "contact me"],

This can be achieved by converting links into an array of objects. Similar to our posts:

const posts = [
  {
    id: 1,
    title: "Why I learned Vue",
    body:
    // ...

Our links array would contain objects, containing a url property to link to.

Project steps

You can go about making this any way you want to, or here are some steps to follow:

• Create an array of objects. Each object can have properties of id, name, and url. The url can be any link you choose.
• If using a name other than links, update the v-for loop in the index.html page.
• Add a key to the v-for loop, this should bind to the id property of our object.
• Inside the loop, add a HTML element to link to the url.