Как указать место для отображения элемента DOM в Vue.js?

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, чтобы получить поле пароля и добавить поле пароля comfirm после поля пароля, используя функцию after () jquery.