Vue 구성 요소 사용 - setattr - 잘못된 속성 이름

Question

Vue.js를 사용하는 초기 단계에 있으며 구성 요소를 사용하려고 시도 할 때 몸이 움츠러 들었습니다. 이 코드의 비 구성 요소 버전이 정상적으로 작동했습니다.

다음 코드는 해독에 문제가있는 오류를 반환하지만 개체의 특성이 있어야하는 위치에 쉼표를 전달하는 것처럼 보입니다.

여기서 문제가 어디에서 발생했는지 분명합니까?

오류

가 catch되지 않은 예외 : DOMException : '요소'에 '의 setAttribute'을 실행하지 못했습니다 : ','유효한 속성 이름이 아닙니다. 여기

HTML

<div id="list_render"> 
    <ol> 
     <todo-item 
      v-for="item in todo_list", 
      v-bind:todo="item", 
      v-bind:key="item.id"> 
     </todo-item> 
    </ol> 
</div> 

JS

Vue.component('todo-item', { 
    props: ['todo'], 
    template: '<li>{{ todo.text }}</li>' 
}) 

var todo = new Vue({ 
    el: '#list_render', 
    data: { 
     todo_list: [ 
      { id: 0, text: 'Learn Vue' }, 
      { id: 1, text: 'Plan project' } 
     ] 
    } 
}) 

Answer 1

제거 쉼표 :

<todo-item 
    v-for="item in todo_list" 
    v-bind:todo="item" 
    v-bind:key="item.id"> 

그것은 일반과 같아야합니다 쉼표가없는 HTML 요소.