Currently, I am working on integrating a blog feature into my Vue project.
<li v-for='blog in blogs' :key="blog.id">
<a>{{ blog.name }}</a>
</li>
I'm looking for a way to add a unique anchor link (to each blog page) for every item in the current loop iteration.
Initially, I attempted to include another v-for
on the <a>
tag that would iterate over links. However, this resulted in rendering blog.name
multiplied by the total elements of each array.
Hopefully, there is a more efficient way to achieve this using loops to avoid manually typing it out like this:
<a href="https://www.google.com"><li>{{ blogs[0].name }}</li></a>
<a href="https://www.youtube.com"><li>{{ blogs[1].name }}</li></a>
<a href="https://www.etc.com"><li>{{ blogs[2].name }}</li></a>