Cộng đồng Hỏi & Đáp của Inflearn

템플릿은.

<template v-if="todoData.length">
    <Item v-for="todo in todoData" :todoItem="todo"/>
</template>

 

위와 같구요.

@Component({
    components: {ItemInput, Header, Item},
})
export default class TodoList extends Vue {

    public todoData: any[] = [{id: 0, title: 'test', status: 'active'}, {id: 1, title: 'test', status: 'clear'}, {id: 2, title: 'test', status: 'clear'}];
}

 

스크립트 부분에서는 이렇게 초기화를 해줍니다.

그러면 3개가 들어있으니 3번 반복까지는 되는데

자식 컴포넌트에서 저 값을 받지를 못합니다..

props 로 하면 잘 됬던걸로 기억하는데.. 이부분도 제가 TS 지식이 부족해서 그런거 같기도하고 ㅠㅠ

 

import {Component, Prop, Vue} from 'vue-property-decorator';

export default class Item extends Vue {

    @Prop() public readonly todoItem!: object | undefined;

    public changeStatus() {
        console.log(this.todoItem);
    }

    public removeItem() {

    }
}

자식에서는 위와 같이 쓰는데..

저기에 빈 객체로 초기화를 해줘도 잘 안되네요 ㅠㅠ

도와주세요!