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

Question

我有一个在 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
  },

我的问题是：执行此操作的最佳方法是什么？

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

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

Passing forEach loop data to href attribute in Vue

javascript

vue.js

href