Question

因此，我尝试遵循在vue.js页面中的API和示例中找到的内容，但似乎无法解决问题。

我有这个组成部分

data[-1] <- ifelse(data[-1] == 1, names(data[-1])[col(data[-1])], NA)


data
#  id  red blue yellow
#1  1  red blue   <NA>
#2  2 <NA> blue   <NA>
#3  3  red blue   <NA>
#4  4 <NA> blue   <NA>
#5  5  red <NA>   <NA>
#6  6 <NA> blue   <NA>
#7  7 <NA> blue   <NA>
#8  8 <NA> blue yellow
#9  9 <NA> <NA> yellow

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个元素？

(//span[text()='Information']//following::div[contains(@class,'edit-area')])[1]/iframe

如果是这样，您可以像这样循环：

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

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>

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

3 个答案: