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"，解決了這一問題