Vue3 To do list 만들기 (4) 버튼으로 배열 삭제 하기

<ul class="list-group " 
v-for="(i,index) in todolist" 
v-bind:key="i.id">
<li class="list-group-item d-flex align-items-center mt-2">
  <div class="form-check flex-grow-1">
      <input class="CheckInput"
         v-model="i.isdone"
         type="checkbox">
          <label class="checkLabel"
          :class="{todoStyle:i.isdone}"
          >{{i.sbj}} </label>
  </div>

  <div>
    <button class= "btn btn-danger btn-sm"
    @click="deleteitem(index)">삭제</button>
  </div>
</li>
</ul>

v-for에서 todolist 배열의 값을 i로 가져올때 index를 생성하여 번호를 붙인다

아래 버튼에서 @click(v-on:click) deleteTodo함수를 호출할때 index를 매개변수로 보내고

 

  var deleteitem=(index)=>{
  console.log(index)
  }

콘솔로그로 먼저 index의 값이 잘 증가하나 확인한다

 

각 li안에 잘 적용이 된 모습을 볼 수 있다

 

자바스크립트의 splice 함수는 원본 배열에 새로운 요소를 추가하거나 기존요소를 삭제 또는 교체하여 원본 배열을 변경 하고 제거된 배열을 반환한다

arr.splce(start,deleteCount,[add1],[add2]...)

 

  var deleteitem=(index)=>{
  // console.log(index)
  todolist.value.splice(index,1)
  }

todolist배열의 value값을 index에서 시작하여 한개를 삭제한다

 

---

• v-if 사용 예제

  <div v-if="!todolist.length">
    <b>오늘은 갓백수의 삶을 꿈꾸시나용..?</b>
  </div>

todolist의 길이가 0이 아닐때 div가 활성화 되어있는 모습

todolist에 값이 추가되어 길이가 0이 아니므로 disable 되었다

---

전체 코드

<template>

<div class ="container">
  <h1>TodoList</h1>
<form
@submit.prevent="Submit" 
 class="d-flex">

<div class="flex-grow-1 ">
<input class="form-control "
 type="text"
  v-model="todo" 
  placeholder="할일"
  >
</div>

<div >
  <button class="btn btn-primary">
  추가
</button>
</div>
</form>

<ul class="list-group " 
v-for="(i,index) in todolist" 
v-bind:key="i.id">
<li class="list-group-item d-flex align-items-center mt-2">
  <div class="form-check flex-grow-1">
      <input class="CheckInput"
         v-model="i.isdone"
         type="checkbox">
          <label class="checkLabel"
          :class="{todoStyle:i.isdone}"
          >{{i.sbj}} </label>
  </div>

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


</li>

</ul>
  <div v-if="!todolist.length">
    <b>오늘은 갓백수의 삶을 꿈꾸시나용..?</b>
  </div>


</div>
</template>

<script>

import {ref} from 'vue'

export default {
setup()
{
  let todo= ref("");
  let todolist = ref([  ]);

  let todoStyle={
    textDecoration:'line-through',
    color:'gray'
  }

  var  Submit = ()=>{
    todolist.value.push({
    id: Date.now(),
    sbj:todo.value,
    isdone : false,
  });

   todo.value="";
  }

  var deleteitem=(index)=>{
  // console.log(index)
  todolist.value.splice(index,1)
  }

  return {
    todo,Submit,todolist,todoStyle,deleteitem,
  }; 
}
}
</script>



<style>
.todoStyle{
  color:red;
  text-decoration: line-through;
}
</style>