CODEWITHSUNDEEP
javascriptvue.jsvue-componentv-for
user7915730
user7915730

Reputation:

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?

Upvotes: 0

Views: 95

Answers (3)

Homura Lin
Homura Lin

Reputation: 116

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>

Upvotes: 1

MaoSantaella
MaoSantaella

Reputation: 21

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

Upvotes: 2

ittus
ittus

Reputation: 22393

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>

Upvotes: 1

Related Questions