Vue 배열에서 특정 요소 삭제

Vue만 해당하는 것이 아니라 자바스크립트라고 할 수 있는데요. 기존에 작성하던 코드에서 이어서 진행하겠습니다.

삭제 버튼을 하나 생성 합니다. 반복문 안에서 넣어주세요. 버튼은 반복하는 개벌 항복바다 삭제 버튼이 있어야 하니까 v-for 안에 있어야 합니다. 몇 번째 있는 항목인지 넘겨주기 위해서 index도 같이 같이 가져올 수 있어요.

<div
      v-for="(todo, index) in todos"
      :key="todo.id"      
      class="card mt-10"
>

v-for에서 반복하는 Index를 버튼을 만들 때 넘겨요.

<button class="btn btn-danger btn-sm" @click="deleteTodo(index)">삭제</button>

deleteTodo 함수가 필요해요. 만든 deleteTodo를 return에 넣어야 합니다. splice는 배열에서 몇 번째 인자에 있는 항목부터 두 번째 있는 항목만큼 잘라내기 해서 반환합니다. 삭제에도 사용할 수 있습니다.

const deleteTodo = (index) => {      
      todos.value.splice(index,1)
    }

아래는 전체 코드입니다.

<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-show="errorMessage!==''" class="card mt-10">
      <div class="card-body p-2">
        {{ errorMessage }}
      </div>
    </div>
    <div
      v-for="(todo, index) in todos"
      :key="todo.id"      
      class="card mt-10"
    >
      <div class="card-body p-2 d-flex align-items-center">
        <div class="form-check flex-grow-1">
          <input class="form-check-input" type="checkbox" v-model="todo.completed"/>
          <label class="form-check-label" :class="{ todo: todo.completed }">
            {{ todo.subject }}
          </label>
        </div>
        <div>
          <button class="btn btn-danger btn-sm" @click="deleteTodo(index)">삭제</button>
        </div>
      </div>
    </div>
  </div>  
</template>

<script>
import { ref } from 'vue'
export default {
  setup() {
    
    const todo = ref("")
    const todos = ref([])
    const errorMessage = ref("")
    const todoCompletedStyle = {
      textDecoration: 'line-through',
      color: 'gray'
    }

    const onAdd = () => {      
      if(todo.value === ''){
        errorMessage.value = "아무것도 입력하지 않았습니다."       
      } else {
          todos.value.push({
            id: Date.now(),
            completed: false,
            subject: todo.value
          })
          todo.value = ""
          errorMessage.value = ""
        }
      }

    const deleteTodo = (index) => {      
      todos.value.splice(index,1)
    }

    return {
      todo,
      todos,  
      errorMessage,
      todoCompletedStyle,
      onAdd,
      deleteTodo
    }
  }
}
</script>

<style scoped>
.todo {
  text-decoration: line-through;
  color: gray;
}
</style>