如何在 Vue.js 中指定渲染 DOM 元素的位置？

Question

我正在 Vue.js 中为 API 构建客户端。这个 API 允许访问我能够创建、读取、更新和删除的一些对象。

我创建了一个 Vue 组件，它通过 API 获取我想要访问的对象的架构，然后根据 API 端定义对象的方式生成一个表单。

除了从对象模式生成的字段之外，我还添加了向生成的表单添加自定义字段的可能性。

其中一些自定义附加字段是可序列化的（我将它们发送回 API），而有些则不是。一个用例是User 对象的密码。有经典的 password 字段，但我添加了一个 confirm_password 字段。这个confirm_password字段并没有发回API，它只是用来验证用户在前端的输入。

到现在为止，这一切都在我的前端进行。经过这么长的介绍，这是我的问题：

是否可以告诉 vue 将特定元素放在另一个元素之后？ 例如，假设我的组件组织如下：

<template>
    <div>
        <div v-for="field in AutoGeneratedFields" >
            //Do something to display the fields
        </div>
        <div v-for="field in SerializableCustomFields" >
            //Do something to display the fields
        </div>
        <div v-for="field in NonSerializableCustomFields" >
            //Do something to display the fields
        </div>
    </div>
</template>

所以，我有 3 个 for 循环。一个用于显示从对象架构生成的字段，一个用于我想要序列化的自定义字段，一个用于我不想序列化的自定义字段。

我希望我的confirm_password 字段显示在我的password 字段之后，但是由于它们不是在同一个循环中创建的，因此很难保证它们会一个接一个地显示。

TLDR: 是否有可能告诉 Vue 将我的 confirm_password 字段放在我的 password 字段之后，即使稍后可能会生成 confirm_password 字段并且可能在password 和confirm_password 之间已经生成了其他字段之后？

注意：我正在使用 quasar 框架，但我也没有找到任何可以移动元素的东西。

Answer 1

如果你想用 Vue 方式来做，这是可能的。

这里有一个例子：http://jsfiddle.net/eywraw8t/335439/

需要一些额外的methods 和computed 属性。但是，如果您需要它在不进行硬编码的情况下自动适应呢？

这是一个例子：http://jsfiddle.net/eywraw8t/335504/

但它要求您以与可序列化字段类似的方式命名不可序列化的自定义字段，在此示例中：

可序列化：password、email

不可序列化：password_confirm、email_confirm

如果NonSerializableCustomFields 中有一个对象包含password_ 或email_，则将其附加在等效的Serializable 之后。

如果您有权访问服务器并且可以适当地编辑您的端点控制器，您还可以传递order 属性，该属性说明应该以哪个顺序呈现字段。然后，您将在获取时将所有字段数组映射为一个，同时添加type 属性，该属性表示对象是否为serializable。然后，您将在提交表单之前过滤 serializable 对象。此处示例：https://codesandbox.io/s/kxvq3rwwv

Answer 2

我认为在这种情况下使用 jquery 会是一个更好的选择。渲染完表单元素后，可以使用jquery抓取密码字段，并使用jquery的after()函数在密码字段后添加确认密码字段。