Как правильно подключать стороннюю библиотеку в компоненте vuejs для динамически появляющихся элементов?

Question

[Bum1989]

Есть таблица (vuejs компонент), которая при загрузке страницы имеет лишь одну строку. Также таблица имеет кнопку добавления новой строки.

Последняя колонка таблицы - input, который юзает библиотеку dropify.
Задача - подключать dropify к динамически создаваемым input-ам в каждой новой строке.
Инициализация dropify - элементарная. Нужно получить элемент input-а по селектору и применить к нему метод dropify() из одноименной библиотеки с вашими необходимыми настройками.
Моим решение стало инициализировать dropify для input-ов с одинаковым классом в 2-ух хуках жизненного цикла - updated и mounted:

updated: function(){
      this.dropifyInit()
    },

mounted: function () {
      this.dropifyInit()
    },

Т.е. получается, что для первой строки я инициализирую dropify в хуке mounted, а всем добавленным в будущем строкам я это делаю в хуке updated.
Задачу то я решил, но есть стойкое внутреннее убеждение, что мой способ слишком громоздкий и не очень правильный.

Comments

[ar5]

сделай директиву dropify

Answer 1

[0xD34F]

Сделайте отдельный компонент, который будет представлять ваш dropify инпут. У него в mounted инициализируйте dropify. И используйте этот компонент в своей таблице вместо обычного input'а.

Comments

[Bum1989]

Спасибо! Так и сделал.