Vue как правильно организовать динамическое добавление элемента с сохранением свойств v-on?

Question

[kiranananda]

vue как правильно организовать динамическое добавление элемента с сохранением свойств v-on ?
Сделано было раньше на jquery я клонировал элемент со всеми биндингами, теперь перехожу на vue но совершенно не ясно как тут организовать такую штуку.
По сути задача такая, есть форма загрузки картинок, после добавления новой картинки ее можно редактировать и удалить, вот это 2 биндинга, надо как то заставить работать... :)

Answer 1

[BookerDeWitt]

Тебе нужно создать массив обьектов, в каждом обьекте будет хранится ссылка на картинку, ее имя, id и тд
в темплейте выводишь этот массив вот так, тут images твой массив с данными

<li v-for="elem in images" :key="elem.id" @click="deleteImg(elem.id)">
   <img :src="elem.link">
   <p>elem.name</p>
   <button @click="change(elem.id)"></button>
</li>

Изначально этот массив пуст, в форме добавили изображение - добавляешь его в массив images и Vue сам выведет все, удаляешь по id

Comments

[BookerDeWitt]

deleteImg думаю понятно что нужно не на тег li вешать а на твою кнопку/крестик

[kiranananda]

Спасибо! То что надо... А есть вариант совместить с выводом из php. Например часть кода в php генерится? Или надо как то массив передавать? Просто в некоторых случаях за массивом придётся доп запрос делать на аяксе. Фреймворк laravel.

[kiranananda]

BookerDeWitt, с делетом ясно. Просто начинаю изучать, не вся логика понятна, но вникаю потихоньку...

[BookerDeWitt]

kiranananda, сам я только вот в скором времени буду изучать связь между беком и Vue, так же с ларавелом буду, а пока точно не скажу но обычно для таких вещей используется аякс как ты и сказал. Попробуй библу axios для этого.

Думаю так :
1. делаешь все то же самое только изначально формируешь массив images из того что прилетит с лары(если надо), например можешь сделать изначальный запрос в хуке created()

2. При отправлении формы с добавленным обьектом делаешь запрос аякс отправляя этот обьект на сервер.

3. Далее не знаю как правильно но можно сделать еще запрос на получение последнего добавленного обьекта(сохранить в отдельной переменной php), или запрос на весь массив или просто без запроса этот обьект добавить в images.

Можно сделать отдельный метод для запроса массива у лары и копирования его в images который ты будешь вызывать и в хуке created() и после отправления формы и после удаления элемента(при удалении запрос на удаление по ид)

Но думаю там разберешься, тема Vue + laravel достаточно популярна

[kiranananda]

BookerDeWitt Спасибо.
Вот так сделал. Все остальное уже на аяксе буду.

Строчек кода конечно много получается, но что то лишний раз дергать сервер тоже не так круто :)

Кстати в ларе по умолчанию axios...