2017-10-17 10 views
0

v-for 루프에서 배열 데이터를 어떻게 소품으로 보낼 수 있습니까? 그래서 나는 그것을 템플릿 안에서 읽을 수 있습니다.배열 데이터를 v-for 루프에서 prop (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}}

인 문자열로 간주됩니다.