SIR
KCP 창업 지원, 수수료 국내최저 2.9% 제공 이벤트!

vue.js v-for와 컴포넌트 > 퍼블리셔팁

퍼블리셔팁

퍼블리싱과 관련된 유용한 정보를 공유하세요.
질문은 상단의 QA에서 해주시기 바랍니다.

vue.js v-for와 컴포넌트 정보

기타 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 = ''
        }
    }
})
 

추천0

댓글 전체

전체 1,214
퍼블리셔팁 내용 검색

회원로그인

진행중 포인트경매

  1. 참여4 회 시작20.11.23 11:40 종료20.11.28 11:40
  2. 참여9 회 시작20.11.22 19:25 종료20.11.29 13:25

(주)에스아이알소프트 (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 대표메일:admin@sir.kr
사업자등록번호:217-81-36347 대표:홍석명 통신판매업신고번호:2014-서울강남-02098호 개인정보보호책임자:이총

© SIRSOFT