Javascript 如何在Vue.js中指定呈现DOM元素的位置？

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

我创建了一个Vue组件，它获取我希望通过API访问的对象的模式，然后根据API端如何定义对象生成一个表单

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

其中一些自定义附加字段是可序列化的（我将它们发送回API），而另一些则不是。这方面的一个用例是

用户

对象的密码。这里有一个经典的

password

字段，但我正在添加一个

confirm\u password

字段。此

confirm\u 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个

用于
循环。一个用于显示从对象模式生成的字段，一个用于我要序列化的自定义字段，另一个用于我不想序列化的自定义字段

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

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

N.B：我正在使用quasar框架，但我也没有找到任何可以移动元素的东西。
我认为在这种情况下，使用jquery将是一个更好的选择。呈现表单元素后，您可以使用jquery获取密码字段，并使用jquery的After（）函数在密码字段后添加comfirm password字段。
如果您希望以可能的方式执行此操作

例如：

需要一些附加的
方法
和
计算的
属性。但是，如果您需要它自动适应而无需硬编码，该怎么办

下面是一个这样做的示例：

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

可序列化：
密码
，
电子邮件

不可序列化：
密码确认
，
电子邮件确认

如果
NonSerializableCustomFields
中有一个对象包含
password\u
或
email\u
的内容，则该对象将附加在它的
可序列化
等价项之后

如果您有权访问服务器，并且可以适当地编辑端点控制器，则还可以传递
order
属性，该属性说明应以何种顺序呈现字段。然后，在添加
type
属性时，将所有字段数组映射到一个已获取的数组中，该属性表示对象是否可
序列化
。然后在提交表单之前过滤可序列化的对象。这里的示例：
针对正确的密码字段的特定情况，但我只是将其用作示例。我正在尝试构建一个通用的vue组件，我可以告诉它“在
randomField2
之后放置
radomField1
”这是一个非常好的JSFIDLE答案！非常感谢你。到目前为止，带有命名约定的自动化示例是我最喜欢的解决方案！