Проблемы с использованием компонента vue-js-modal - PullRequest
Новая
       30

Проблемы с использованием компонента vue-js-modal

1 голос
/ 28 сентября 2019

Я следовал инструкциям по использованию компонента из их документации, однако получаю TypeError: show is not a function

В своем основном JS-файле (app.js) я добавил следующее и добавил в свой проект, используя npm 

import VModal from 'vue-js-modal'
Vue.use(VModal)

В документации говорится, что теперь я могу вызывать модальный режим из любой точки приложения, поэтому я создал JS-файл для конкретной страницы и добавил следующее, чтобы скрыть / показать модальный код с name="hello-world" на странице, которая включалаvue, app.js и специфичный для страницы файл profile.js. 

export default {
    methods: {
        show() {
            this.$modal.show('hello-world');
        },
        hide() {
            this.$modal.hide('hello-world');
        }
    }
}

Когда я загружаю страницу, я не вижу модальное содержимое, однако, когда я нажимаю на ссылку <a href="#" @click.prevent="show">Modal</a>, я получаюошибка метода show TypeError: show is not a function

Я использую Laravel Mix и проверил, что все компилируется, как и ожидалось.Ниже показано, как я включаю JS-файлы на странице профиля: 

<script type='text/javascript' src='/assets/js/manifest.js?ver=5.2.3'></script>
<script type='text/javascript' src='/assets/js/vendor.js?ver=5.2.3'></script>
<script type='text/javascript' src='/assets/js/app.js?ver=1569678574'></script>
<script type='text/javascript' src='/assets/js/profile.js?ver=1569678574'></script>

Я пытаюсь «повысить уровень» своего опыта Vue и JavaScript, ранее я просто придерживался написания ES5, а мой Vue был написан безкомпоненты и привязаны к конкретному экземпляру страницы Vue, поэтому любая помощь будет принята с благодарностью!

...