Vue v-for 할일 목록 만들어 배열에 넣기

지금까지 연습했던 것을 바탕으로 input 창에서 입력하는 것을 바탕으로 배열에 넣어 볼 수 있어요. 

todo와 todos 변수를 생성하여 각각 타이핑하고 있는 상태 문자는 todo에 저장하고 todos에는 todo에서 작성하던 것을 추가할 때 todos에 추가되도록 onAdd 함수를 만들어서 연결합니다. react에서는 submit 연결할 때 e.preventdefault() 넣어줬어야 했는데요. vue에서는 .prevent 라는 event-modifiers 통해서 편하게 할 수 있어요.

<template>
  <div class="container">
    <h2>TO DO</h2>    
    <form 
      @submit.prevent="onAdd"
      class="d-flex"
    >
      <div class="flex-grow-1 mr-1">
        <input 
          class="form-control" 
          type="text"
          v-model="todo"
          placeholder="할일을 입력하세요."
        />
      </div>
      <div>
        <button
          class="btn btn-primary"
          type="submit"          
        >
          추가
        </button>
      </div>
    </form>
    {{ todos }}
  </div>  
</template>

<script>
import { ref } from 'vue'
export default {
  setup() {
    
    const todo = ref("")
    const todos = ref([])

    const onAdd = () => {      
      todos.value.push({
        id: Date.now(),
        subject: todo.value
      })
    }

    return {
      todo,
      todos,
      onAdd
    }
  }
}
</script>

지금은 todos를 그냥 변수로 출력하고 있어서 변수 내용이 나올 겁니다.

todos 안에 여러 todo가 들어갈 텐데요. v-for를 통해서 반복해서 보여 줄 수 있습니다. 간단하게 {{ todos }} 부분을 v-for를 통해서 변경해 보겠습니다. {{ todos }} 있던 자리를 바로 아래처럼 수정해 봤습니다.

    <div
      v-for="todo in todos"
      :key="todo.id"      
    >
      {{ todo.subject }}
    </div>

입력할 때마다 todo가 잘 나오는 것을 알 수 있어요. 마지막으로 부트스트랩을 적용한 결과물입니다. 입력하고 추가 버튼을 눌러도 남아 있는 부분 때문에 초기화하는 코드도 추가했어요.

<template>
  <div class="container">
    <h2>TO DO</h2>    
    <form 
      @submit.prevent="onAdd"
      class="d-flex"
    >
      <div class="flex-grow-1 mr-1">
        <input 
          class="form-control" 
          type="text"
          v-model="todo"
          placeholder="할일을 입력하세요."
        />
      </div>
      <div>
        <button
          class="btn btn-primary"
          type="submit"          
        >
          추가
        </button>
      </div>
    </form>
    <div
      v-for="todo in todos"
      :key="todo.id"      
      class="card mt-10"
    >
      <div class="card-body p-2">
        {{ todo.subject }}
      </div>
    </div>
  </div>  
</template>

<script>
import { ref } from 'vue'
export default {
  setup() {
    
    const todo = ref("")
    const todos = ref([])

    const onAdd = () => {      
      todos.value.push({
        id: Date.now(),
        subject: todo.value
      })
      todo.value = ""
    }

    return {
      todo,
      todos,
      onAdd
    }
  }
}
</script>