Vue.js - 使用不正确的数据刷新嵌套字段数组

Question

我正在尝试创建一个包含嵌套字段集合的 Vue 页面。 IE。父表单和可重复的子表单。

它的工作原理是删除子表单时，模板呈现不正确

请看我创建的小提琴示例 - 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 的策略。为此，我为每个 member 对象添加了一个 id

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">

还有一件事，正如 cmets 中所指出的，您的 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。尽管它现在可能不会引起问题，但将来可能会。