[Udemy Vue 완벽가이드 Section3] 46. 목록 항목 제거하기

list에서 항목을 지우려면 어떻게 해야할까?

v-for를 사용하고는 있지만, 여전히 HTML요소이다.

다시말해, 여전히 이벤트리스너를 추가할 수 있다는 의미.

예를 들어, 목록 항목 click시 반응하도록, event listener를 추가할 수 있다.

<li v-for="(goal, index) in goals" @click=""></li>

 

 

목록 항목을 클릭하면 해당 goal을 goals 배열에서 삭제하도록 처리해보자.

JavaScript에서는 method를 통해 추가할 수 있는 동작.

 

삭제하고자 하는 goal에 대한 식별자가 필요한데, index를 활용해보자.

removeGoal 메서드에 대해 index를 인수로 갖도록 하고, JS내장 메서드인 splice메서드를 통해 하나의 요소만 삭제하도록 해보자.

**splice함수

Array.splice(start, deleteCount)

start: 배열의 변경을 시작할 index

deleteCount: 배열에서 제거할 요소의 개수

 

this.goals.splice(index,1) → 입력된 Index에 해당하는 항목을 goals 배열에서 찾아 요소 삭제.

그래서 해당하는 index를 제대로 잘 전달하기만 하면 된다.

 

 

click의 이벤트리스너로 removeGoal 메서드를 잘 가리키고, 이때 index도 해당메서드로 전달되도록 하자.

goal, index 모두 v-for가 들어있는 li요소 그 자체 또는 여닫는 태그 내 자식요소에서 사용할 수 있다.

따라서 index를 li요소에 있는 removeGoal함수에 사용할 수 있다.

 

 

index.html

<li v-for="(goal, index) in goals" @click="removeGoal(index)"></li>

 

app.js

const app = Vue.createApp({
  data() {
    return {
      goals: [],
    };
  },
  methods: {
    removeGoal(index) {
      this.goals.splice(index, 1);
    },
  },
});

app.mount("#user-goals");

 

이렇게 index를 이용하여 항목을 삭제하고, 이벤트 리스너를 통해 배열을 업데이트하는 method와 연결까지 해보았다.

 

v-for을 통해 배열을 출력하고 있으므로, Vue의 핵심기능인 내장반응형 동작에 따라 배열이 변경되면 자동으로 페이지로 가서 list가 업데이트된다.

배열에 추가된 항목이 있으면 알아서 list를 업데이트하고, 항목을 삭제하면 DOM 요소를 삭제한다.

 

이것이 바로 Vue가 내부에서 하는 작업. 이런 점이 Vue의 훌륭한 장점.

 

 

 

** 출처: 모든 내용은 Udemy Vue-완벽가이드 강의를 기반으로 작성하였습니다.