Question

如何将v-for循环中的某些数组数据发送到道具中？所以我可以在de template中读出来。

示例（index.html）：

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

test =“”是模板内的道具。

模板示例（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>

我回来的结果是（浏览器）：

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

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

Answer 1

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

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

的字符串

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

1 个答案: