Send array data from v-for loop into a prop (VUE)

Question

How am I able to send some array data from v-for loop into a prop? So i can read it out inside de template.

Example (index.html):

<grid v-for="boss in bossesArray.slice(0, 20)" test="{{ boss.id }}"></grid>

Where the test="" is the prop inside the template.

Template example (Grid.vue):

<template>
  <div class="grid">
    <div class="grid__body">
      {{ test }}
    </div>
  </div>
</template>

<script>
  export default {
    props: ['test'],
    data: function () {
      return {
        msg: "This is a message",
        counter: 0
      }
    }
  }
</script>

The result i get back is (Browser):

{{ boss.id }}
{{ boss.id }}
{{ boss.id }}
{{ boss.id }}
{{ boss.id }}
{{ boss.id }}
{{ boss.id }}
{{ boss.id }}
{{ boss.id }}
{{ boss.id }}
{{ boss.id }}
{{ boss.id }}
{{ boss.id }}
{{ boss.id }}
{{ boss.id }}
{{ boss.id }}
{{ boss.id }}
{{ boss.id }}
{{ boss.id }}
{{ boss.id }}

Is there a way to send the boss id through the prop?

score 4 · Accepted Answer · answered Oct 17 '17 at 10:37

You should pass dynamic props like this

<grid v-for="boss in bossesArray.slice(0, 20)" v-bind:test="boss.id"></grid>

And short hand is:

<grid v-for="boss in bossesArray.slice(0, 20)" :test="boss.id"></grid>

You are passing prop using test="{{boss.id}}" which is passed as a static prop as you are not binding it and the value you passed to the static prop is considered a string which is {{boss.id}}

Send array data from v-for loop into a prop (VUE)

1 Answers1