Using an array's object's attribute in a v-for with v-bind in vue.js?

So I'm trying to follow what I've found in the API and examples from the vue.js page but it doesn't seem to be working out.

I have this component

Vue.component('project',
data: function ()
return
title: "Sketch",
desc: "Zoe Beauty is an online store web application that sells different types of makeup from many brands in " +
"the market. It works with a nodeJs server and Handlebars templating to create the front end. The app is " +
"created under the slogan “Just Shine”, Most feedback in the app is elusive to this slogan and so is it's " +
"graphic style. The user can filter the items by many different things such as a type of product, brand, price, " +
"rating, etc. Also, they can add items to their cart.",
links: [
"github":
"link": "https://github.com/booleanaVillegas/juliana-villegas-taller-uno",
"logo": "https://firebasestorage.googleapis.com/v0/b/booleana-s-portafolio.appspot.com/o/github.svg?alt=media&token=83edf83c-cd80-43fa-bedd-a2348ff23b3e"
,
"web":
"link": "https://enigmatic-shelf-33047.herokuapp.com/",
"logo": "https://firebasestorage.googleapis.com/v0/b/booleana-s-portafolio.appspot.com/o/web.svg?alt=media&token=b5e092a2-beb3-4c72-a329-8e402e82032f"

]
,
img: "https://firebasestorage.googleapis.com/v0/b/booleana-s-portafolio.appspot.com/o/projects%2Fzoe.png?alt=media&token=b0255dda-51f9-4958-8f7b-af978cc9b790"
,
template: `
<div class="each-project">
<img src="https://firebasestorage.googleapis.com/v0/b/booleana-s-portafolio.appspot.com/o/projects%2Fzoe.png?alt=media&token=b0255dda-51f9-4958-8f7b-af978cc9b790"
alt="" class="pic-project">
<h3 class="purple title-project">title</h3>
<p class="project-desc">desc</p>
<div class="links-container" v-for="link in links">
<a :href="link.link" class="link-container"><img
:src='link.logo' alt='link.key' class='link-img'></a>
</div>
</div>
`
);


The :src and :href in the v-for: link in links are not displaying anything, and when I inspect the element it is literally showing 'link.logo' instead of the actual link

how can I mix v-for and v-bind correctly?

<div class="links-container" v-for="link in links[0]">

3 Answers
3

first your array just contains 1 element, and that element was an object so just remove the

links:
"github":
"link": "https://...",
"logo": "https://..."
,
"web":
"link": "https://...",
"logo": "https://..."




look https://codepen.io/maoma87/pen/JaWQEq?editors=0010

Your links array contains only 1 element?

links: [
"github":
"link": "https://github.com/booleanaVillegas/juliana-villegas-taller-uno",
"logo": "https://firebasestorage.googleapis.com/v0/b/booleana-s-portafolio.appspot.com/o/github.svg?alt=media&token=83edf83c-cd80-43fa-bedd-a2348ff23b3e"
,
"web":
"link": "https://enigmatic-shelf-33047.herokuapp.com/",
"logo": "https://firebasestorage.googleapis.com/v0/b/booleana-s-portafolio.appspot.com/o/web.svg?alt=media&token=b5e092a2-beb3-4c72-a329-8e402e82032f"

]


If it's, you can loop like this:

<div class="links-container" v-for="(linkValue, key) in links[0]">
<a :href="linkValue.link" class="link-container"><img
:src='linkValue.logo' alt='key' class='link-img'></a>
</div>


:alt="key"

Your v-for should once read array one element.

Links object a element like this


"github":
"link": "https://github.com/booleanaVillegas/juliana-villegas-taller-uno",
"logo": "https://firebasestorage.googleapis.com/v0/b/booleana-s-portafolio.appspot.com/o/github.svg?alt=media&token=83edf83c-cd80-43fa-bedd-a2348ff23b3e"
,
"web":
"link": "https://enigmatic-shelf-33047.herokuapp.com/",
"logo": "https://firebasestorage.googleapis.com/v0/b/booleana-s-portafolio.appspot.com/o/web.svg?alt=media&token=b5e092a2-beb3-4c72-a329-8e402e82032f"




So your v-for like this

<div class="links-container" v-for="link in links">
<a :href="link.github.link" class="link-container">
<img :src='link.github.logo' alt='link.key' class='link-img'>
</a>
<a :href="link.web.link" class="link-container">
<img :src='link.web.logo' alt='link.key' class='link-img'>
</a>
</div>


Thanks for contributing an answer to Stack Overflow!

But avoid …

To learn more, see our tips on writing great answers.

Some of your past answers have not been well-received, and you're in danger of being blocked from answering.

Please pay close attention to the following guidance:

But avoid …

To learn more, see our tips on writing great answers.

Required, but never shown

Required, but never shown

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.