В bootstrap - vue проект включенного метода не запускается - PullRequest
Новая
       74

В bootstrap - vue проект включенного метода не запускается

0 голосов
/ 01 февраля 2020

В моем приложении проекта vue / cli 4 / vuex / bootstrap - vue у меня есть большая страница списков объявлений с определенными модальными диалогами, и я хочу переместить диалоги в отдельный файл *. vue, так как эти диалоги будет использоваться и на других страницах. Для связи, когда диалог должен быть открыт, я генерирую события, и эти события не запускаются в моем отдельном файле *. vue. В src / views / ads / AdsListing. vue я определяю: 

<template>

    <b-card class="frontend_listing_container">
        ...
        <ads-modal></ads-modal>
    </b-card>

</template>

<script>

    import Vue from 'vue'
    import VueResource from 'vue-resource'
    Vue.use(VueResource)

    import {bus} from '@/main'
    import appMixin from '@/appMixin';

    ...
    Vue.component('ads-modal', require('../ads/AdsModal.vue').default);

    export default {
        data() {

        ...
        methods: {
            runEditAdModal(ed_id) {
                console.log('runEditAdModal ed_id::')
                console.log(ed_id)  // IN THE CONSOLE I SEE THIS method is called

                console.log('+++ runEditAdModalbus::')
                console.log(bus) // AND VALID BUS OBJECT

                bus.$emit('showEditAdModal', ed_id)
            }

В src / views / ads / AdsModal. vue Я пытаюсь отловить событие в событиях компонента: 

<script>

    import Vue from 'vue'
    import VueResource from 'vue-resource'

    ...
    import {bus} from '@/main'
    import appMixin from '@/appMixin';

    ...

    export default {
        data() {
            return {
            ...
            }
        },

        name: 'adsModal',

        created() {
            alert( 'src/views/ads/AdsModal.vue CREATED::' ) // I DO NOT SEE THIS ALERT POPUP

        }, // created() {

        mounted() {
            alert( 'src/views/ads/AdsModal.vue MOUNTED::' )  // I DO NOT SEE THIS ALERT POPUP
            bus.$on('showEditAdModal', (ed_id) => {
                console.log('showEditAdModalged ed_id::')
                console.log(ed_id)
                ...
            }) // bus.$on('page_changed', (from, to) => {
        }, // mounted() {

Поскольку события не инициируются, событие showEditAdModal не создается. Что не так и как это исправить? 

"bootstrap-vue": "^2.1.0",
"font-awesome": "^4.7.0",
"moment": "^2.24.0",
"moment-timezone": "^0.5.27",
"vue": "^2.6.10",
"vue-date-pick": "^1.2.1",

ОБНОВЛЕНО №1: а) с помощью 

Vue.component('ads-modal', require('../ads/AdsModal.vue'));

Я получил предупреждение: 

vue.runtime.esm.js?2b0e:619 [Vue warn]: Failed to mount component: template or render function not defined.

found in

---> <AdsModal>
       <AdsListingPage>
         <HomePage> at src/views/Home.vue
           <AppContainer> at src/App.vue
             <Root>

Но созданные / подключенные события не инициируются;

b) со строкой 

   Vue.component('ads-modal', () => import('../ads/AdsModal.vue'))

нет предупреждений, а созданные / подключенные события не инициируются.

c) Я пытался переместить импорт в src / main. js (комментируя это в моем src / views / ads / AdsListing. vue) и то же самое: созданные / смонтированные события не запускаются, и я не знаю, как вызвать методы в AdsModal. vue.

...