[Vuejs]-Make a link list component of a link component in Vue

by

0👍

✅

Assuming you have an array of link objects that provide the props text, url, icon and optionally expert (because I can’t see where you’re using that), if your goal is to pass this array as a prop to your Link List component, then it would look something like this

<template>
  <ul>
    <!-- note the ":key" binding. This should uniquely identify each entry in the list -->
    <li v-for="({ text, url, icon }) in list" :key="url">
      <Link
        :text="text" 
        :url="url" 
        :icon="icon"
      />
    </li>
  </ul>
</template>
<script>
import { Link } from '@/components' // or whatever makes sense

export default {
  name: 'LinkList',
  components: { Link },
  props: {
    list: Array
  }
}
</script>

Using this would look something like

<template>
  <LinkList :list="list" />
</template>
<script>
import { LinkList } from '@/components'

export default {
  components: { LinkList },
  data: () => ({
    list: [{
      text: 'Link #1',
      url: 'https://example.com',
      icon: 'whatever'
    }, {
      // and so on
    }]
  })
}
</script>

Leave a comment