在v-for中使用數組對象的屬性與vue.js中的v-bind？

Question

因此，我嘗試遵循在vue.js頁面中的API和示例中找到的內容，但似乎無法解決問題。

我有這個組件

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？

Answer 1

首先，您的數組僅包含1個元素，而該元素是一個對象，因此只需刪除[]

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

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

Answer 2

您的鏈接數組僅包含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>

Answer 3

您的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>