从V-for循环发送数组数据到一个道具（VUE）

Question

我怎样才能从v-for循环发送一些数组数据到道具？所以我可以在模板里读出来。

实施例（的index.html）：

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

当测试= “” 是模板内的支柱。

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

有没有办法通过送老板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}}