[Vue.js] 삭제기능구현

 

App.vue

        <ul>
          <todo-list-item
            v-for="(todoItem, index) in todoItems"
            :key="index"
            :index="index"
            :todoItem="todoItem"
            @remove="removeTodoItem"
          ></todo-list-item>
        </ul>
        
      removeTodoItem(index: number) {
      console.log("삭제할 인덱스 ==========>", index);
      this.todoItems.splice(index, 1);
      storage.save(this.todoItems);
    },

TodoItemList.vue

<template>
  <div>
    <li>{{ todoItem }} <button @click="removeTodoItem">삭제</button></li>
  </div>
</template>

<script lang="ts">
import Vue from "vue";

export default Vue.extend({
  props: {
    todoItem: String,
    index: Number,
  },
  methods: {
    removeTodoItem() {
      console.log("삭제버튼 눌러떠요");
      this.$emit("remove", this.index);
    },
  },
});
</script>

<style scoped></style>