javascript - 請教一段Vue視圖更新的程式碼

Question

build.vue如下

<style>
    #build-content {
        margin: 20px 20px;
    }
</style>
<template>
    <p id="build-content">
        <h2>构建配置</h2>
        <p v-for="(buildValue, buildKey) in currentConfig">
            <li v-for="(value, key) in buildValue"
                is="build-item"
                v-bind:buildEventId="buildKey"
                v-bind:buildKey="key"
                v-bind:buildValue="value"
                v-on:remove="remove">
            </li>
        </p>
        <br>
        <br>
    </p>
</template>
<script>
    import BuildItem from './build-item.vue'
    import Vue from "vue";
    import qs from 'qs';
    export default {
        components:{ BuildItem },
        data () {
            return {
                currentConfig: {
                    "1" : {
                        "akey" : "aValue",
                        "bkey" : "bValue",
                        "ckey" : "cValue",
                    },
                    "2" : {
                        "akey" : "aValue",
                        "bkey" : "bValue",
                        "ckey" : "cValue",
                    }
                }
            }
        },
        methods: {
            remove: function (eventId, key) {
                console.log(eventId + " " + key);
                Vue.delete(this.currentConfig[eventId], key);
            }
        },
        mounted: function () {
            
        }

    }
</script>

build-item.vue如下

<style scoped>
    .tab {
        margin-right:2em
    }
</style>
<template>
    <p>
        <br>
        <span class="tab">事件</span>
        <Input v-model="eventId" placeholder="请输入..." style="width: 150px" class="tab"/>
        <span class="tab">key:</span>
        <Input v-model="key" placeholder="请输入..." style="width: 200px" class="tab"/>
        <span class="tab">value:</span>
        <Input v-model="value" placeholder="请输入..." style="width: 300px" class="tab"/>
        <Button type="error" @click="remove">删除</Button>
    </p>
</template>
<script>
    export default {
        data () {
            return {
                eventId: this.buildEventId,
                key: this.buildKey,
                value: this.buildValue,

            }
        },
        props: {
            buildEventId: {
              type: String
            },
            buildKey: {
                type: String
            },
            buildValue:{
                type: String
            }
        },
        methods: {
            remove: function () {
                this.$emit('remove', this.eventId, this.buildKey);
            }
        }
    }
</script>

點擊第一行的刪除，視圖中更新的卻是第三行被移除，但是console.log的輸出的確對應第一行，並沒有問題，初學Vue求指導？

更新：

<p v-for="(buildValue, buildKey) in currentConfig" :key="buildKey">
    <li v-for="(value, key) in buildValue" :key="key"
        is="build-item"
        v-bind:buildEventId="buildKey"
        v-bind:buildKey="key"
        v-bind:buildValue="value"
        v-on:remove="remove">
    </li>
</p>

增加:key="buildKey" 和 :key="key" 修正問題

Answer 1

試試在v-for那裡加上key屬性
key