javascript - 将数组数据从 v-for 循环发送到 prop (VUE)

Question

如何将 v-for 循环中的一些数组数据发送到 prop 中？这样我就可以在模板内读出它。

示例(index.html):

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

其中 test=""是模板内的 prop。

模板示例(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 发送老板ID？

Answer 1

你应该像这样传递动态 Prop

<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 传递，因为您没有绑定(bind)它，并且会考虑您传递给 static prop 的值一个字符串 {{boss.id}}