I've been struggling to understand why this feature isn't functioning as expected. I'm using sample code for reference, but it's not behaving the same way. When I click on the delete button, nothing happens even though it should remove the selected item. This issue persists regardless of how many boxes are added or which one is chosen.
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>
Attempted to use the emit function and work with indexes instead of ids. Added a findBoxId method inspired by the example code and commented out identifiedBox due to errors. Also, tried implementing a separate method in Box.vue but opted to place the emit directly inside the button.