javascript - 请教一段Vue视图更新的代码

问题描述

问 题

build.vue如下

<style>
    #build-content {
        margin: 20px 20px;
    }
</style>
<template>
    <div id="build-content">
        <h2>构建配置</h2>
        <div 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>
        </div>
        <br>
        <br>
    </div>
</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>
    <div>
        <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>
    </div>
</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求指导？

更新：

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

增加:key="buildKey" 和 :key="key" 修复问题

解决方案

试试在v-for那里加上key属性
key

这篇关于javascript - 请教一段Vue视图更新的代码的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！