Можно ли привязать блоки/компоненты к массиву/объекту?

Question

[Денис]

Demo
Есть компонент draggable, в котором находятся блоки, позицию которых я хочу менять вручную, при помощи drag and drop.
Со списком всё легко, но мне не подходит (не уверен).

Возможно ли как-то привязать блоки/компоненты внутри draggable к массиву/объекту в data, чтобы я мог сохранять эти данные на бэке и соответственно подгружать их?

В примере видно, что testList меняется в соответствии с перемещением элементов списка.
Но в примере перемещения блоков - list2 меняет значения, но сами блоки не меняют свою позицию.

Вот такого эффекта я хочу добиться:
gif

Answer 1

[Владимир Коротенко]

У каждого таскаемого элемента есть х у ширина и высота. Все это прекрасно сжаться на список. В чем у вас проблема?

Answer 2

[Aetae]

list2 никак не связан с item в отличие от testList. В list2 у вас должны лежать не цифры а объекты с данными, по которым будет строиться соответствующий item, сами же item'ы должны быть перечислены через v-for, чтобы когда list2 менялся - менялся и их порядок.
То что вы хотите сделать - возможно,через render-функцию и $children, но эта библиотека так не умеет. Да и не нужно это на самом деле.

Comments

[Денис]

list2 связан в одном направлении.
Когда перетаскиваю элементы item данные в list2 меняются.
Вопрос в том, как в такой ситуации сделать двустороннюю привязку?

Да и не нужно это на самом деле.

В моей ситуации, если я правильно понимаю, именно так и нужно.

Вот такого эффекта я хочу добиться:
gif
Хочу менять положение блоков и сохранять на бэке по ключу.
И соответственно с бэка подгружать данные "позиционирования" и рендерить на фронте в нужном порядке.

[Aetae]

Чтоб была двусторонняя привязка - привязка должна быть двусторонней, твой кэп. Иными словами отрисовка item'ов должна полагаться на твой list2. Сейчас отрисовка item'ов никак не связана с list2, они рисуются так, как ты им сказал - по порядку. То что либа там что-то меняет не имеет значения если ты сам никак не отрисовываешь эти изменения.

[Денис]

Aetae, это я понимаю, поэтому и задал здесь свой вопрос.
Думал, что есть простое решение для моей задачи, что-то вроде "добавить :key='item_1'" для двусторонней привязки.