2017-10-17 96 views
0

我怎樣才能從v-for循環發送一些數組數據到道具?所以我可以在模板裏讀出來。從V-for循環發送數組數據到一個道具(VUE)

實施例(的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道具?

回答

3

你應該通過動態道具這樣

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