Компонент рендеринга в динамически добавляемом HTML после запроса Ajax

Вариант использования:

У меня есть зависимость от библиотеки JQuery, которая динамически добавляет HTML после некоторых запросов Ajax. Я хотел бы отображать компоненты Vue внутри добавленного HTML. Я могу предоставить содержимое HTML, но не могу изменить способ его добавления в DOM с помощью JQuery.

У меня нет другого выбора, кроме как отобразить компонент, когда запрос Ajax завершится и HTML будет добавлен в DOM.

Что было бы лучшим подходом для этого?


javascript vue.js vue-component
person Patrick    schedule 14.11.2016    source источник

Ответы (1)


arrow_upward
2
arrow_downward

«Лучший» подход очень субъективен.

Однако вы, безусловно, можете прикрепить компонент к элементу, если знаете идентификатор элемента:

import component from 'Component.vue'
new Vue({
    el: '#targetId',
    render: h => h(component)
})

Это предполагает, что вы используете отдельные файловые компоненты. Вы всегда можете создать компонент «на лету» в соответствии с документацией:

new Vue({
  el: '#targetId',
  // options
})
person David L    schedule 14.11.2016
comment
Знаете ли вы, есть ли какой-либо возврат производительности. Я использую внешний компонент сетки, который позволяет мне добавлять данные таблицы между строками. Может ли такой подход быть проблемой, если пользователь просматривает, скажем, 100 строк? - person Patrick; 14.11.2016
comment
Трудно сказать, но, вероятно, это не оптимально. Если я правильно вас понимаю, вы, по сути, создадите 100 компонентов Vue? Определенно будут накладные расходы, но вам придется протестировать их и профилировать, чтобы увидеть, есть ли снижение производительности. - person David L; 14.11.2016