将 forEach 循环数据传递给 Vue 中的 href 属性答案

【问题标题】：Passing forEach loop data to href attribute in Vue将 forEach 循环数据传递给 Vue 中的 href 属性
【发布时间】：2022-01-11 01:28:03
【问题描述】：

我有一个在 Vue 中循环的数组，并在每次迭代时渲染一个锚元素。我循环的数组是我的道具之一，我尝试了几种不同的东西，虽然我相信我可以让它工作，但这种方式对我来说似乎很老套，我想确保它不是比我想象的要简单

              <template v-for="(lead, index) in leads">
                 <a target="_blank" v-bind:href="lead.present_url"><b>foobar</b></a>
                 <div>{{lead.name}}</div>
                 <div>{{lead.id}}</div>
              </template>

我已经尝试过各种组合方式，以下不是一个完整的列表，而只是我尝试过的一些示例：:href="lead.present_url"href='lead.present_url':href='${lead.present_url}'（带有 tildas），其中的几种变体，包括有和没有 v-bind，v-bind:href='leads[index].present_url'

  props: {
    leads: Array
  },

我的问题是：最好的方法是什么？

【问题讨论】：

标签： javascript vue.js href

【解决方案1】：

您实际上想在想要多个元素的元素上使用v-for，并且您还需要绑定:key：

<template>
<div class="lead-container">
  <div v-for="lead in leads" :key="lead.id">
    <a target="_blank" :href="lead.present_url">
      <strong>foobar</strong>
    </a>
    <div>{{lead.name}}</div>
    <div>{{lead.id}}</div>
  </div>
</div>
</template>

<script>
export default {
  props: {
    leads: {
      type: Array,
      default: () => [],
    }
  }
}
</script>

【讨论】：

我的错误，在template 标签之间实际上还有很多其他元素，我为了清洁而删除了这些元素，但锚标签就是其中之一。
答案已更新 - 相同的概念。除了模板之外，每个lead 都需要某种容器。虽然模板可以使用v-for，但这有点奇怪，因为模板中的每个元素都需要:key 绑定，因为模板不是DOM 中的元素。
另外，<b> 标签已被弃用。使用<strong> 或定义font-weight 的类。