javascript - Please tell me a piece of code for Vue view update

Question

build.vueAs follows

<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.vueAs follows

<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>

Click on the delete of the first row, and the view is updated with the removal of the third row, but the output of console.log does correspond to the first row, and there is no problem. , new to Vue and need guidance?

renew:

<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>

Add :key="buildKey" and :key="key" Fix the problem

Answer 1

Try adding the key attribute to v-for
key