[Vue.js] 컴포넌트를 리스트 렌더링하기 v-for

● 컴포넌트에 v-for 디렉티브 사용하기 

<div id="app"> 
    <ul>
        <child-component v-for="item in list"
                         v-bind:key="item.id"
                         v-bind:name="item.name"
                         v-bind:age="item.age"></child-component>
    </ul>
</div>

 

 

//자식 컴포넌트
Vue.component('child-component', {
    template: '<li>{{ name }} 나이: {{ age }}</li>',
    props: ['name', 'age']
})
//부모 컴포넌트
new Vue({
    el:'#app',
    data: {
        list: [
            {id: 1, name: '홍길동', age: 30},
            {id: 2, name: '김민지', age: 18},
            {id: 3, name: '이지호', age: 24}
        ]
    }
})

 

리스트의 요소가 컴포넌트의 속성으로 사용된다. 

 

 

 

● props로 전달받은 데이터는 마음대로 변경하면 안됨

//자식 컴포넌트
Vue.component('child-component', {
    template: '<li>{{ name }} 나이: {{ age }}</li>\
            <button v-on:click="doPlus">나이플러스</button>',
    props: ['name', 'age'],
    methods: {
        doPlus: function(){
            this.age += 1 // -> [Vue warn] eroor
        }
    }
})
//부모 컴포넌트
new Vue({
    el:'#app',
    data: {
        list: [
            {id: 1, name: '홍길동', age: 30},
            {id: 2, name: '김민지', age: 18},
            {id: 3, name: '이지호', age: 24}
        ]
    }
})

 

=> props.age 속성은 부모 컴포넌트에서 잠시 빌린 것으로, 자식 컴포넌트 쪽에서 값을 마음대로 변경하면 안된다. 

 

자식 컴포넌트에서 데이터 변경을 추가하고 싶을 때는 산출속성을 사용해서 새로운 데이터를 생성해야 한다.