요소 내부에서 Vue 반복

Vue 구성 요소 의 배열을 통해없이 'v-for'라고하는 요소를 다시 배열하려고 시도하고 있습니다. official docs API 또는 articles 온라인에서는 'v-for'에 대한 보조를 찾지 못했습니다. 작동하지 않는,요소 내부에서 Vue 반복

<foo :index="0"><foo/> 

<foo :index="1"><foo/> 

<foo :index="2"><foo/> 
//etc...

을 그리고이 시도 :

<div v-for="(item, index) in items"> 
    <foo :index="index"> 
    <foo/> 
</div>

이 원하는 :

나는 이것을 가지고

<foo v-for="(item, index) in items":index="index"> 
<foo/>

도움이 많이 감사합니다! 어제 Vue.js로 코딩을 시작했습니다.

출처

2017-02-23 rodolfor

HTML이 잘못되었습니다. 당신은 이것을 잘 할 수 있습니다.

<foo v-for="(item, index) in items" :index="index"></foo>

출처

2017-02-23 21:42:59

<foo v-for="(item, index) in items"> 
    {{index}} 
</foo>

출처

2017-02-23 20:18:23

나는 질문을 편집했다. 나는 foo 속성에서 인덱스를 사용할 수 있어야한다. – rodolfor

는 http://jsbin.com/kapipezalu/edit?html,js,console,output

당신은 아마 foo는 구성 요소에 소품을 정의하는 것을 잊었다이 작업을 수행합니다.

<div id="app"> 
    <foo v-for="(item, index) in items" :index="index"></foo> 
    </div> 

    <template id="foo-temp"> 
    <div> 
     <span>{{ index }}</span> 
    </div> 
    </template>

JS :

Vue.component('foo', { 
    props: ['index'], 
    template: '#foo-temp' 
}) 

new Vue({ 

    el: '#app', 

    data: { 
    items: [ 
     {id: 1, title: 'One'}, 
     {id: 2, title: 'Two'}, 
     {id: 3, title: 'Three'} 
    ] 
    } 

})

프로 팁 : 사용 브라우저 콘솔 - 그것은 당신에게 멋진 경고 및 오류를 표시합니다.

출처

2017-02-23 20:56:10

요소 내부에서 Vue 반복

답변

관련 문제