Vue.js item doesn't get deleted from array

Question

I've been trying to figure out just why this isn't working and I must be missing something. I am using example code for inspiration but it doesn't seem to co-operate the same way as in the example, as upon clicking on the button, the item in question should be removed whereas now clicking on any delete button does nothing, no matter the amount of added boxes and which one of them I select.

App.vue:

<template>
        <the-header title="Remember"></the-header>
        <new-box @add-box="addBox"></new-box>
    <ul>
         <box 
            v-for="box in boxes" 
            :key="box.id"
            :id="box.id"
            :name="box.name"
            :number="box.number"
            @delete="deleteBox(id)">
            </box>
        <big-box>    
            title="Big" info="Additional info"
        </big-box>
    </ul>
</template>

<script>
import TheHeader from './components/layouts/TheHeader.vue';
import Box from './components/boxes/Box.vue';
import BigBox from './components/boxes/BigBox.vue';
import NewBox from './components/boxes/NewBox.vue';

export default {
    components: {
        TheHeader,
        Box,
        BigBox,
        NewBox
    },
    data: () => ({
        boxes: [
            {
            id: "box one",
            name: "name one",
            number: "one"
            }
        ]
    }),
    methods: {
    addBox(name, number) {
            const newBox = {
                id: new Date().toISOString(),
                name: name,
                number: number
            };
            this.boxes.push(newBox);
        },
    findBoxId(boxId) {
        // const identifiedBox = 
        this.boxes.find(
            (box) => box.id === boxId
        );
        // identifiedBox();
    },
        deleteBox(boxId) {
            this.boxes = this.boxes.filter((box) => box.id !== boxId);
        }
    },
};
</script>

<style>
#app input {
  font: inherit;
  padding: 0.15rem;
}
#app label {
  font-weight: bold;
  margin-right: 1rem;
  width: 7rem;
  display: inline-block;
}
#app form div {
  margin: 1rem 0;
}
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

Box.vue:

<template>
    <li>
        <base-card>
            <h3>{{ name }}</h3>
            <h5>{{ number }}</h5>
                <!-- <button @click="goRemove">Shoo away the box</button> -->
                <button @click="$emit('deletebox', id)">Shoo away</button>
            </base-card>
    </li>
</template>


<script>
export default {
    props: [
        'id',
        'name',
        'number'
],
emits: ['toggle-favorite', 'deletebox'],
data() {
    return {
        boxItem: {
            id: "one",
            name: "box one",
            number: "one"
            },
        }
    },
    // methods: {
    //     goRemove(boxId) {
    //         this.$emit('deletebox', boxId);
    //     }
    // }
}
</script>

<style scoped>
h3 {
    color: rgb(64, 17, 194);
    text-align: center;
}
li {
    list-style-type: none;
}
</style>

Tried using the emit function, tried to work with index instead of id, added the findBoxId method as inspired by the example code and commented out identifiedBox as it was giving an error. Also tried to have a separate method in Box.vue but decided to put the emit directly inside of the button.

Answer 1

From your child component Box.vue, you're emitting event named "deletebox", and in your parent component you're catching an event named "delete" (@delete)

Try changing in you parent component an event listener to @deletebox, like this:

App.vue

<box 
    v-for="box in boxes" 
    :key="box.id"
    :id="box.id"
    :name="box.name"
    :number="box.number"
    @deletebox="deleteBox($event)">
</box>