Javascript — Vue JS загружает модальный контент с помощью AJAX

Question

Javascript — Vue JS загружает модальный контент с помощью AJAX

Я использую vue js с laravel. На моей странице 13 модалов, я думаю, что не стоит вставлять 13 модалей на одну и ту же страницу, поэтому я положил это в свой клинок:

<modal v-if="showModal" @close="showModal = false">
<header slot="header" v-html="modalHeader"></header>
<component slot="body" :is="currentBody"></component>
</modal>

И в моем файле .js у меня есть это:

Vue.component('modal', require('./components/Modal.vue'));
Vue.component('StatusModal', require('./components/modals/StatusModal.vue'));
Vue.component('UserModal', require('./components/modals/UserModal.vue'));

const profile = new Vue({
el: '#profile',
data: {
showModal: false,
modalHeader: '',
currentBody: '',
},
methods: {
showStatus(){
this.showModal = true
this.modalHeader = 'Confirmation'
this.currentBody = 'StatusModal'

},
showUser(){
this.showModal = true
this.modalHeader = 'Confirmation'
this.currentBody = 'UserModal'
}
}
})

Например, здесь у меня есть два модала StatusModal и UserModal, и я загружаю их в свой файл js, поэтому, если у меня есть 13 или более модалей, я загружу 13 компонентов в свой файл js, мне нужно решение, которое загружает только компонент что мне нужно, когда я вызываю функцию, можно загрузить компонент в вызове функции?

Я пытался использовать ajax и загружать содержимое блейда в вызове ajax и загружать его в мой модальный режим, но я столкнулся с проблемой, я использую проверку vue для входных данных, поэтому проверка не работает (vee-validate), также любая переменная vue не компилируется и я получаю {{variable}} в моем модальном.

Каково лучшее решение для моего случая? я ценю любую помощь

1

ajax javascript laravel-5 php vuejs2

Решение

Другие решения

Других решений пока нет …

Источник

Accepted Answer

Изменить после чата

Решение найдено:

HTML:

<component slot="body" :is="currentBody"></component>

JS:

showStatus() {
this.dialog = true
System.import('./components/modals/StatusModal.vue').then((response) => {
this.currentBody = response
});
},

Предыдущий ответ

Если использовать конфигурацию (модули) vue-cli webpack, я бы выбрал следующее решение. Ключевым моментом является использование System.import, Это то же самое, что требуется, но асинхронный. Это будет разрешено только один раз, даже если вы вызываете один и тот же файл несколько раз. Это кеширует это на стороне клиента.

Я использую функция рендеринга здесь, потому что намного проще управлять замена шаблона.

import Modal from './components/Modal.vue'

const profile = new Vue({
render(h) {
if (this.showModal) {
return h('modal', {
on: {
close() {
this.showModal = false
}
}
}, [
h('header', { slot: 'header' }, this.modalHeader),
h(this.currentBody, { slot: 'body' })
]);
} else {
return null;
}
},
data: {
showModal: false,
modalHeader: '',
currentBody: {},
},
methods: {
showStatus() {
this.showModal = true
this.modalHeader = 'Confirmation'
this.currentBody = System.import('./components/modals/StatusModal.vue')
},
showUser() {
this.showModal = true
this.modalHeader = 'Confirmation'
this.currentBody = System.import('./components/modals/UserModal.vue')
}
},
components: {
Modal
}
})

Обратите внимание, я не проверял это. Дайте мне знать, если что-то пойдет не так или я неправильно понял ваше дело.

0