Используя атрибут объекта массива в v-for с v-bind в vue.js? - PullRequest
Новая
       21

Используя атрибут объекта массива в v-for с v-bind в vue.js?

0 голосов
/ 03 сентября 2018

Так что я пытаюсь следовать тому, что я нашел в API и примерах со страницы vue.js, но, похоже, это не работает.

У меня есть этот компонент 

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>
`
});

В ссылках v-for: в ссылках: src и: href ничего не отображается, и когда я проверяю элемент, он буквально показывает 'link.logo' вместо реальной ссылки

как правильно смешать v-for и v-bind?

Ответы [ 3 ]

0 голосов
/ 03 сентября 2018

сначала ваш массив содержит только 1 элемент, и этот элемент был объектом, поэтому просто удалите [] 

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

взгляд https://codepen.io/maoma87/pen/JaWQEq?editors=0010

0 голосов
/ 03 сентября 2018

Ваш v-for должен однажды прочитать один элемент массива.

Связывает объект с таким элементом 

{
   "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"
    }
}

Так вот ваш v-for вот так 

<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>
0 голосов
/ 03 сентября 2018

Ваш массив ссылок содержит только 1 элемент? 

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"
                }
            }]

Если это так, вы можете выполнить цикл следующим образом: 

<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>
...