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"）が、3行目（ "1"、 "cKey"、 "cValue"）を削除します。

おかげ

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"を追加