Vue.js 項目沒有從數組中刪除

Question

我一直在試圖弄清楚為什么這不起作用，而且我一定遺漏了一些東西。 我正在使用示例代碼來獲得靈感，但它似乎與示例中的合作方式不同，因為單擊按鈕后，應該刪除有問題的項目，而現在單擊任何刪除按鈕什么都不做，不重要的是添加框的數量以及其中的哪一個我 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>

盒子.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>

嘗試使用 emit function，嘗試使用索引而不是 id，根據示例代碼添加了 findBoxId 方法，並注釋掉了 identifiedBox，因為它給出了一個錯誤。 還嘗試在 Box.vue 中使用單獨的方法，但決定將發射直接放在按鈕內。

Answer 1

從您的子組件 Box.vue 中，您正在發出名為“deletebox”的事件，而在您的父組件中，您正在捕獲一個名為“delete”的事件 (@delete)

嘗試在你的父組件中改變一個@deletebox 的事件監聽器，像這樣：

App.vue

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