Passing forEach loop data to href attribute in Vue

Question

I have an array that I'm looping over in Vue, and rendering an anchor element with each iteration. The array that i'm looping over is one of my props, I've tried several different things and while I do believe I could get it working, the way would seem very hacky to me and I'm wanting to make sure it's not simpler than I'm thinking

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

I've tried all manner of combinations, the following is not a comprehensive list but just some examples of what I've tried: :href="lead.present_url" href='lead.present_url' :href='${lead.present_url}' (with tildas), several variations of these, including with and without v-bind, v-bind:href='leads[index].present_url'

  props: {
    leads: Array
  },

My question is: what is the best way to go about doing this?

J. Titus · Accepted Answer · 2022-01-11 01:51:53Z

1

You actually want to use v-for on the element that you want multiple of, and you need to bind a :key as well:

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

edited Jan 11, 2022 at 1:51

answered Jan 11, 2022 at 1:38

J. Titus

9,7201 gold badge37 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

dan178 Over a year ago

My mistake, there's actually quite a few other element in between the template tags that I removed for the sake of cleanliness but the anchor tag is one of them.

J. Titus Over a year ago

Answer updated - same concept. You need some sort of container for each lead aside from the template. While the template can use v-for, it's kind of weird because then each element inside the template would need a :key binding, since the template is not an element in the DOM.

J. Titus Over a year ago

Also, the <b> tag is deprecated. Use either <strong> or a class that defines font-weight.

Collectives™ on Stack Overflow

Passing forEach loop data to href attribute in Vue

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related