在 v-for 中使用数组对象的属性和 vue.js 中的 v-bind？

Posted 2023-02-23

【中文标题】在 v-for 中使用数组对象的属性和 vue.js 中的 v-bind？

【英文标题】：Using an array's object's attribute in a v-for with v-bind in vue.js?

【发布时间】：2019-02-08 02:28:32

【问题描述】：

所以我正在尝试遵循我在 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"
                  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？

【问题讨论】：

只需将 v-for 行改为：<div class="links-container" v-for="link in links[0]">

【参考方案1】：

您的链接数组仅包含 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>

【讨论】：

alt 属性是动态的并且依赖于 key 属性，你应该像这样更新它：:alt="key"

【参考方案2】：

首先您的数组只包含 1 个元素，并且该元素是一个对象，因此只需删除 []

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

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

【参考方案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>