javascript - S'il vous plaît, dites-moi un morceau de code pour la mise à jour de Vue View

Question

build.vueComme suit

<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.vueComme suit

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

Cliquez sur Supprimer sur la première ligne, et ce qui est mis à jour dans la vue, c'est que la troisième ligne a été supprimée, mais la sortie de console.log correspond à la première ligne, et il n'y a pas de problème. un débutant dans Vue, pouvez-vous s'il vous plaît me donner quelques conseils ?

Mise à jour :

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

Ajouter :key="buildKey" 和 :key="key" Résoudre les problèmes

Answer 1

Essayez d'ajouter l'attribut key à v-for
key