Vue的视图更新

Question

建立一个单一的网页应用程序与VUE 2和VUE路由器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"，解决了这一问题