Vue.js - 嵌套字段數組刷新不正確的數據

Question

我想創建一個包含嵌套字段集合的Vue頁面。即家長形式和可重複的兒童形式。

它的工作原理不同之處在於刪除子窗體時，模板渲染不正確

請看到我創建的小提琴例子 - https://jsfiddle.net/c4marcus/1mu2oceb/8/

的樣本數據包含了披頭士的基本信息。如果點擊「Ringo」旁邊的垃圾桶，那麼錯誤地「George」將會消失，而不是「Ringo」。

但是，當您點擊提交時，正在保存正確的數據（請參見下面的屏幕截圖）。

我覺得問題必須在於MemberFormset vue組件的remove方法，該方法是通過單擊垃圾箱按鈕觸發的。

remove: function(index) { 
    this.members.splice(index, 1) 
    this.$emit('input', this.members) 
}, 

一旦拼接，模板應該使用新數據呈現窗體數組。

<div class="form-group" v-for="(member, index) in members"> 
    <member-form :model="member" 
       :index="index" 
       @input="update(index, $event)"> 

     <div slot="trash"> 
      <button type="button" 
        class="btn btn-default margin-top-md" 
        @click="remove(index)"> 

       <i class="fa fa-trash"></i> 
      </button> 
     </div> 

    </member-form> 

    <hr v-if="separator(index)" /> 
</div> 

Answer 1

的主要問題似乎是在這裏：

<member-form :model="member" 
       :index="index" 
       @input="update(index, $event)"> 

您需要provide a key爲包含在循環中的自定義組件。在這種情況下，您不是直接在自定義組件上進行迭代，但爲Vue提供了一個鍵可幫助它確定更新DOM的策略。爲此我添加了一個id每個member對象

members: [ 
    {name: 'John', id: 1}, 
    {name: 'Ringo', id: 2}, 
    {name: 'Paul', id: 3}, 
    {name: 'George', id: 4} 
] 

和更新模板這樣：

<member-form :model="member" 
       :index="index" 
       @input="update(index, $event)" 
       :key="member.id"> 

還有一兩件事，在評論中指出，您的add方法需要更新增加一個新的id值。

add: function() { 
    const newId = Math.max(this.members.map(m => m.id)) + 1 
    this.members.push({name: null, id: newId}) 
}, 

現在您的DOM在刪除後正確更新。

這是更新的fiddle。

我注意到幾件事，看看看起來像一些代碼，像他們陷入了一些VUE告誡。例如，這代碼：

update: function(index, value) { 
    this.members[index] = value 
    this.$emit('input', this.members) 
}, 

看起來它會陷入Vue公司的array detection caveat。儘管現在可能不會造成問題，但未來可能會出現問題。