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

by

2👍

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

👤MaoSantaella

1👍

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>
👤ittus

1👍

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>
👤Homura Lin

Leave a comment