Есть ли простой способ сделать добавление таких элементов (и как потом обработать)?

Question

[DemonFromIrk]

Вопрос в заголовке.

Comments

[Павел Корнилов]

Облегчить работу с подобными интерактивными списками можно, используя VueJS.

[DemonFromIrk]

Павел Корнилов, выглядит непросто.

[Павел Корнилов]

DemonFromIrk, это по началу. Я сейчас сам её изучаю, и уже нашёл несколько приятных моментов:
1. Связь между моделью и состоянием - любые изменения отслеживаемых переменных тут же отображаются в модели
2. Возможность разбивать на логически понятные компоненты - каждый со своей областью видимости и возможностью получения корневой (не глобальной).
3. Возможность создавать модель по шаблону, в т.ч. и в цикле

Звучит не очень понятно? Выложите свой код на codepen - со стилями , а я переведу это во Vue.

[DemonFromIrk]

Павел Корнилов, я после вашего совета сел немного разобраться с vue, классная вещь, конечно.
Только немного непонятно, если я использую vue, то мне надо всю страницу генерировать через него? Не будет дурным тоном использовать только нужные возможности? (у меня большинство страниц уже готово)
Было бы очень интересно посмотреть, как вы переведете мою страницу в vue! Я использую adminLte, вот пример страницы link

Если надо, могу адаптировать для codepen.

[Павел Корнилов]

DemonFromIrk, прелесть Vue в том, что его можно подключить к единственному блоку.
Не знаю, хороший это тон или нет, но судя по ссылке - подобный проект просто идеален для неё. Возможно, со временем, отрефакторите с её помощью.
Ещё, лично для меня, важным плюсом Vue перед тем же React с его JSX является то, что она не требует для своей работы никакого препроцессинга кода. Хотя, при желании - можно его использовать и писать в том же JSX - выбор за вами.

Вот набросал - https://codepen.io/KorniloFF/pen/xMvOmR?editors=1111
Ещё не доделал события, но в общем смысл уже понять можно.

[DemonFromIrk]

Павел Корнилов, спасибо за пример. Что посоветуете по vue почитать?

[DemonFromIrk]

Павел Корнилов, и ещё вопрос:
Хочу динамически определять поля модального окна и ссылку ajax реквеста, в какую сторону копать?( 1 модальное окно на все операции на странице, получатся. поля и запросы в зависимости от нажатой кнопки)

[Павел Корнилов]

DemonFromIrk, вот, набросал с событиями добавления / удаления элементов
https://codepen.io/KorniloFF/pen/NoQRjK

[Павел Корнилов]

DemonFromIrk, тут просто данные хранить в объекте с зависимостями action / url / fields
Далее делать проверку по action и динамически отрисовывать форму с нужными полями.

[DemonFromIrk]

Павел Корнилов, большое вам спасибо!)

[Павел Корнилов]

DemonFromIrk, да на здоровье! Был рад помочь.

[Павел Корнилов]

DemonFromIrk, мне было самому интересно.
Вот, на основе вашей заготовки для тренировки такую плюшку запилил: https://js-master.ru/examples/VueJS/ToDo/
Там уже с сохранением на серверной стороне, возможностью помечать активные, возможностью редактирования элементов двойным кликом...
Широко раскрывает возможности Vue, и для обучения мне было полезно.

[DemonFromIrk]

Павел Корнилов, спасибо, что вдохновляете меня на изучение vue)
Не подскажете, а как использовать ajax для получения данных для рендеринга?
Условно, у меня есть такая штука https://goo.gl/6MLDJz
Как мне с таким кодом сделать ajax запрос при загрузке страницы?
И чтобы поменять данные после, я же могу просто сделать ajax запрос, а потом присвоить значения из него в data для vue?

[Павел Корнилов]

DemonFromIrk, ссылка не открылась, но вопрос понятен и так.
Лично я использую axios. Если в проекте уже юзается JQuery - то тогда её.

При загрузке страницы - пользуемся хуком created, и в нём делаем запрос, а ответом обновляем состояние data-данных.
Если сделаешь простенький пример на кодпене - покажу кодом.

[DemonFromIrk]

Павел Корнилов, я поменял на гуглоссылку) на всякий случай прикрепил, хотя код там типовой.
Вообще я использу jquery, да.

[Павел Корнилов]

DemonFromIrk, ну, тогда и незачем лишний инструмент в проект тянуть.

[Павел Корнилов]

https://codepen.io/KorniloFF/pen/pYjLby?editors=1010

[DemonFromIrk]

Павел Корнилов, спасибо, еще один маленький вопрос:
вроде я доделал по вашему примеру ajax-запрос, как в его конце мне перерендерить значение в диве?

var metadata = new Vue({
        el: '#metadata',
        data:{
            openDate: '10/05/90',
            status: 'active'
        },
        created() {
            // Таким же образом можно подгружать и ответ аякса
            this.status = false;

        },
        mounted() {
            this.getData();
        },
        methods: {
            getData() {
                $.post('/api/v1/order',
                    {
                        act: "getMeta",
                        order: "d6bf6ba8f44e1f3f7e76ceb95c3f1a69"
                    }
                    )

                    .done(function(resp) {
                        var d = jQuery.parseJSON(resp);
                        metadata.openDate = d.openDate;
                        metadata.status = d.status;
                        console.log(metadata.status)
                    })
            }
        }
    })

[Павел Корнилов]

DemonFromIrk, https://codepen.io/KorniloFF/pen/pYjLby?editors=1010

[Павел Корнилов]

upData(data) {
          Object.assign(this.$data, data)
        },

Это прямой ответ на вопрос.

Answer 1

[WapSter]

Добавление и удаление узлов