Question

我正在尝试创建一个包含嵌套字段集的Vue页面。即父母表格和可重复的儿童表格。

除了在删除子表单时，模板呈现不正确

的例外情况

请参阅我创建的小提琴示例 - https://jsfiddle.net/c4marcus/1mu2oceb/8/

样本数据包含披头士乐队的基本信息。如果你点击“Ringo”旁边的垃圾桶，那么错误的“乔治”将会消失，而不是“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">

正如评论中指出的那样，还需要更新添加方法以添加新的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。并且考虑到它现在可能不会引起问题，可能在将来发生。

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

1 个答案: