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.

equi · Accepted Answer · 2022-12-28 21:31:46Z

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>

edited Dec 28, 2022 at 21:31

answered Dec 28, 2022 at 21:16

equi

97410 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Murfy Over a year ago

Tried both what you wrote as well as "@deletebox="deleteBox($event, id)">" but it doesn't seem to be working yet, does the whole boxId thing seem to be correct so far on both pages?

Collectives™ on Stack Overflow

Vue.js item doesn't get deleted from array

1 Answer 1

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Related