将数组数据从 v-for 循环发送到道具（VUE）[重复]答案

【问题标题】：Send array data from v-for loop into a prop (VUE) [duplicate]将数组数据从 v-for 循环发送到道具（VUE）[重复]
【发布时间】：2018-03-29 00:14:13
【问题描述】：

如何将一些数组数据从 v-for 循环发送到道具中？所以我可以在模板里面读出来。

示例（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 }}

有没有办法通过prop发送boss id？

【问题讨论】：

标签： javascript vue.js vuejs2 prop

【解决方案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}}" 传递 prop，它作为静态 prop 传递，因为您没有绑定它，并且您传递给静态 prop 的值被视为 {{boss.id}} 的字符串

【讨论】：