인프런 커뮤니티 질문&답변

슬프구나님의 프로필 이미지
슬프구나

작성한 질문수

Typescript with Vue 실전 프로젝트

라우터 구조 잡기

안녕하세요? @Prop 관련 질문좀..ㅠㅠ

작성

·

153

0

템플릿은.

<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() {

}
}

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

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

도와주세요!

답변 2

1

성도희님의 프로필 이미지
성도희
지식공유자

안녕하세요, ChangHyeon Bae 님!

작성하신 코드를 보았는데요.

자식 컴포넌트에서 @Component 데코레이터를 사용하지 않아서 발생하는 문제로 보입니다.

아래 코드와 같이 데코레이터를 사용해주세요 ^^


@Component
export default class Item extends Vue {

@Prop()
readonly todoItem!: any;
}

0

슬프구나님의 프로필 이미지
슬프구나
질문자

평일에 회사집회사집 하느라 이제야 확인했네요.

답변 감사합니다 ㅠㅠ 

슬프구나님의 프로필 이미지
슬프구나

작성한 질문수

질문하기