[Vuejs]-How to create dynamic links based on an API request

If you are making the api request from a component, you can create a list of links like follows:

// for demo purposes, let's say links are returned as an array of objects
[
  {
    href: '/path/to/page1',
    linkText: 'Page 1'
  },
  {
    href: '/path/to/page2',
    linkText: 'Page 2'
  }
]

// MyComponent.vue
<template>
  <div class="sidebar">
    <ul>
      <li v-for="(item, index) in items" :key="index">
        <a :href="item.href">{{ item.linkText }}</a>
      </li>
    </ul>
  </div>
</template>

export default {
  data () {
    return {
      links: []
    }
  },
  mounted() {
    axios.get(url).then(response => {
      this.links = items.data
    })
  }
}