Question

使用vue 2和vue-router 2构建单页应用

build.vue：

<style>
    #build-content {
        margin: 20px 20px;
    }
</style>
<template>
    <div id="build-content">
        <h2>title</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>

积item.vue：

<style scoped>
    .tab {
        margin-right:2em
    }
</style>
<template>
    <div>
        <br>
        <span class="tab">event</span>
        <Input v-model="eventId" placeholder="input..." style="width: 150px" class="tab"/>
        <span class="tab">key:</span>
        <Input v-model="key" placeholder="input..." style="width: 200px" class="tab"/>
        <span class="tab">value:</span>
        <Input v-model="value" placeholder="input..." style="width: 300px" class="tab"/>
        <Button type="error" @click="remove">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>

单击列表的第一行（“1”，“akey”，“aValue”），但删除第三行（“1”，“cKey”，“cValue”），console.log输出正确，如何解决？

由于

Answer 1

https://vuejs.org/v2/guide/list.html#key

此默认模式效率很高，但仅适用于您的列表渲染输出不依赖于子组件状态或临时DOM 状态（例如表单输入值）。

<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"，修复了问题

Vue视图更新？

1 个答案: