vue.js v-for와 컴포넌트

v-for와 컴포넌트

v-for를 사용자 정의 컴포넌트에 직접 사용할 수 있습니다.
<my-compent v-for="item in items" :key="item.id"></my-compent>

2.2.0이상에서 v-for는 key가 필수 입니다.
그러나 컴포넌트에는 자체 범위가 분리되어 있기 때문에 컴포넌트에 데이터를 자동으로 
전달하지는 않습니다. 
반복할 데이터를 컴포넌트로 전달하려면 props도 사용해야 합니다.

<my-compoent
    v-for="(item, index) in items" 
    v-bind:item="item" 
    v-bind:index="index"
    v-bind:key="item.id"
></my-compent>

컴포넌트에 item을 자동으로 주입하지 않는 이유는 컴포넌트가 v-for의 작동방식과 밀접하게
결합되기 때문입니다. 데이터의 출처가 명확히 하면 다른 상황에서 컴포넌트를 재사용할 수 있습니다.

간단한 할일 목록 전체 예제입니다.
HTML부분
<div id="todo-list-example">
    <input 
        v-model="newTodoText" 
        v-on:keyup.enter="addNewTodo"
        placeholder="Add a todo"
    >
    <ul>
        <li 
        v-for="(todo, index) in todos" 
        v-bind:key="todo.id" 
        v-bind:title="todo.title"
        v-on:remove="todos.splice(index,1)"
        ></li>
    </ul>
</div>

is="todo-item" 속성을 보면 <li>엘리먼트는 <ul>안에서만 유효합니다.
<todo-item>과 같은 일을 하지만 잠재적인 브라우저의 구문분석 오류를 해결합니다.

JS부분
Vue.component('todo-item', {
  template: '\
    <li>\
      {{ title }}\
      <button v-on:click="$emit(\'remove\')">X</button>\
    </li>\
  ',
  props: ['title']
})

new Vue({
    el: '#todo-list-example', 
    data:{
Vue.component('todo-item', {
  template: '\
    <li>\
      {{ title }}\
      <button v-on:click="$emit(\'remove\')">X</button>\
    </li>\
  ',
  props: ['title']
})

new Vue({
  el: '#todo-list-example',
  data: {
    newTodoText: '',
    todos: [
      {
        id: 1,
        title: 'Do the dishes',
      },
      {
        id: 2,
        title: 'Take out the trash',
      },
      {
        id: 3,
        title: 'Mow the lawn'
      }
    ],
    nextTodoId: 4
    }, 
    methods:{
        addNewTodo: function(){
            this.todos.push({
                id: this.nextTodo++, 
                title: this.newTodoText
            })
            this.newTodoText = ''
        }
    }
})