@DemetrioMoscow

Как вставить в DOM динамический компонент Vue, находящийся в полученном по xhr html?

Всем привет!

Помогите, пожалуйста, разобраться с вопросом.
Дано: vue, laravel, webpack.
В resources/js/components лежат компоненты *.vue
в app.js компоненты подключены динамически:

const ReviewComponent = () => import(/* webpackChunkName: "review-component" */ './components/ReviewComponent.vue');

const app = new Vue({
    el: '#app',
    components: {
        ReviewComponent
    }
});


webpack делит их на chunks, которые лежат в public/js/chunks/*.js

Задача:
По клику открывается модальное окно bootstrap, в которое по xhr загружается уже готовый html с сервера.
Внутри этого html содержится Vue-компонент, например:
<div> ... <review-component></review-component> ... </div>


Как его инициализировать?
Пытался сделать примерно так:
const ReviewComponentCtor = Vue.extend(ReviewComponent);
const vm = new ReviewComponentCtor({
propsData: {
//
}
}).$mount('#reviews');

но получаю ReviewComponent is not defined. Не понимаю как его достать из чанков вебпака.
  • Вопрос задан
  • 43 просмотра
Пригласить эксперта
Ответы на вопрос 2
Aetae
@Aetae
Тлен
Правильный ответ: не грузить html с сервера. Серьёзно, это противоречит самой идее SPA. С сервера должны пилетать данные, хотя-бы как-то так:
{ 
  infoBlock: [{
    type: 'text',
    value: '...'
  },{
    type: 'component',
    value: 'review'
  },{
    type: 'text',
    value: '...'
  }]
}
а уже SPA разложит это всё на готовую разметку.

Вредный ответ: Vue.compile().
Ответ написан
yarkov
@yarkov Куратор тега Vue.js
Проект "Жизнь после смерти" - lifeafterdeath.ru
Как насчёт документации?
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы