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

Question

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

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

有没有办法通过道具发送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)

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

javascript

vue.js

vuejs2

prop