Make a link list component of a link component in Vue - vue.js

Question

I've just made a Link component in Vue, which is new for me. Now I need to make a Link list component, which is basically an UL of LI elements of this Link component. I looked for a solution, but most most of the examples do work with a local array/object and I can't seem to figure it out.
So my question here is: What would a Link list component look like, making use of the existent Link component?
Here's the Link component:
<template>
<nuxt-link
:to="localePath(url)"
:class="$style.link"
>
<Icon
v-if="icon"
class="icon icon--size:2.5x"
:name="icon"
/>
<span
class="text"
>
{{ text }}
</span>
</nuxt-link>
</template>
<script src="./index.js"></script>
<style type="text/css" src="./index.module.scss" module lang="scss"></style>
import { Icon } from "#/components";
export default {
props: {
text: {
type: String,
required: true,
default: "",
},
url: {
type: String,
required: true,
default: "",
},
icon: {
type: String,
required: true,
default: "",
},
expert: {
type: Boolean,
required: false,
default: false,
},
},
components: {
Icon,
},
};
Should the Link list component receive an array as well like this?
export default {
props: {
list: {
type: Array,
required: true,
default: "",
},
},
Link,
},
};

Answer 1

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>