Javascript 将数组数据从v-for循环发送到prop（VUE）

我如何才能将一些数组数据从v-for循环发送到道具中？所以我可以在de模板中读取它

示例（index.html）：

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

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

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

---

有没有办法通过道具发送老板id？

你应该像这样传递动态道具

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

简而言之是：

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

---

您正在使用

test=“{boss.id}}”

传递道具，该道具作为静态道具传递，因为您没有绑定它，并且传递给静态道具的值被视为字符串，即

{boss.id}

您应该像这样传递动态道具

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

简而言之是：

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

您正在使用

test=“{{boss.id}}”

传递prop，它作为静态prop传递，因为您没有绑定它，并且传递给静态prop的值被认为是一个字符串，它是

{boss.id}