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