如何在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之间已经生成其他字段之后？

N.B：我正在使用类星体框架，但我没有找到任何东西来移动元素。

Answer 1

如果你想这样做Vue-way就可以了。

这里有一个例子：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（）函数在密码字段后添加确认密码字段。