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

Question

I am building a client in Vue.js for an API. This API gives access to some objects that I am able to create, read, update and delete.

I created a Vue component that fetch the schema of the object I want to access through the API and then generates a form based on how the object is defined API-side.

I also added the possibility to add custom fields to the generated form, in addition to the fields generated from the object schema.

Some of these custom additional fields are serializable (I send them back to the API) and some are not. A use case for this would be the password of a User object. There is the classic password field but I am adding a confirm_password field. This confirm_password field is not sent back to the API, it is only used to verify the user's input in the front-end.

Until now, all this is up and working on my front-end. After this long introduction, here is my question :

Is it possible to tell vue to put a specific element just after another one ? For example, let's says my component is organized as follows :

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

So, I have 3 for loops. One to display the fields generated from the object schema, one for the custom fields I want to serialize and one for custom fields I don't want to serialize.

I would like my confirm_password field to be displayed just after my password field, but since they are not created in the same loop, It's very hard to guarantee they will be displayed one after another.

TLDR: Is it possible, and if yes how, to tell Vue to put my confirm_password field just after my password field even though the confirm_password field might be generated later and potentially after there are already other fields generated between password and confirm_password ?

NB : I am using quasar framework, but I didn't find anything there to move element around either.

Answer 1

I think using jquery would be a better option in this case. After rendering the form elements, you can use jquery to grab the password field and add comfirm password field after password field using after() function of jquery.

Answer 2

If you want to do it Vue-way it's possible.

An example is here: http://jsfiddle.net/eywraw8t/335439/

Some additional methods and a computed property are required. But what if you need it to automatically fit without hardcoding?

Here is an example that does that: http://jsfiddle.net/eywraw8t/335504/

But it requires you to name your non-serializable custom fields in a similar way to your serializable fields, in this example:

Serializable : password , email

Non-Serializable : password_confirm , email_confirm

If there is an object in NonSerializableCustomFields that contains password_ or email_ it is appended after it's Serializable equivalent.

If you have access to the server and can edit your endpoints controllers appropriately, you can also pass order property which says in which order fields should be rendered. You would then map all your fields arrays into one on fetched while adding type property which says if the object is serializable . You would then filter serializable objects before submitting form. Example here: https://codesandbox.io/s/kxvq3rwwv