-
카테고리
-
해결 여부
미해결
:key="todo.id" 에러 관련 질문 드립니다.
18.04.09 17:10 작성 조회수 112
0
:key="todo.id" 를 추가할 경우 undefined 에러가 뜨는데 코드상에서 문제점을 알 수가 없어 질문 드립니다. 어느 부분에서 문제가 발생했을까요?? 코드는 다음과 같습니다.
-app.js
Vue.component('todo-item', { props: ['passedData'],
template: '<p>{{ passedData.text }}</p>'
});
Vue.component('todo-list', {
props: ['list'],
template: '<p>{{list.text}}</p>'
});
var app = new Vue({
el: '#app',
data: {
Todos: [
{ id: 0, text: 'Learn Vue.js' },
{ id: 1, text: 'Learn Components' },
{ id: 2, text: 'Learn Props' },
{ id: 3, text: 'Learn For Loop' }
],
Languages: [
{ id: 0, text: 'python'},
{ id: 1, text: 'c++'},
{ id: 2, text: 'java'},
{ id: 3, text: 'objective-c'}
]
// 할일 #1
// 배열 안에 python, c++, java, objective-c 를 값으로 갖는
// Languages 프로퍼티를 추가하여 위에 제작한 todo-list 컴포넌트에 전달하고,
// 배열 값을 모두 for loop 로 출력하세요.
}
});
-index.html의 내용
<div id="app"> <!-- Child Component -->
<todo-item v-bind:todo="todo" v-for="todo in Todos" :key="todo.id"></todo-item>
<todo-list v-bind:passed-data="language" v-for="language in Languages" :key="language.id"></todo-list>
<!-- v-for에서 가져온 language를 다시 props인 passed-data로 전달해준다 -->
<!-- 할일 #3 -->
<!-- todo-list 컴포넌트 등록 -->
</div>
답변을 작성해보세요.
0
답변 1