Блог

Один из экземпляров моего приложения vue, похоже, создается слишком рано. Даже с document.addEventListener('DOMContentLoaded', ...) А. Как следствие, я заметил, что прослушиватели событий неправильно привязаны. Простое @click="test" (где тестовые ссылки на a console.log ) не сработало.

Ниже приведен код, в котором @click это не работает. Это компонент, расположенный в экземпляре vue, созданном на DOMContentReady :

 const navBurger = {
    template: `
        <nav class="burgerNav"">
            <button class="burgerNav__icon" @click="test">
            </button>
        </nav>
    `,
    methods: {
        test: function() {
            console.log('test')
        }
    }
}

export default navBurger
 

Я «решил» проблему, добавив небольшой тайм-аут (200 мс) перед созданием экземпляра в корневой экземпляр этого компонента, но это кажется грязным и хрупким решением. Есть ли какой-нибудь чистый способ создать экземпляр в нужное время ? Мне нужно, чтобы этот экземпляр был готов как можно быстрее, потому что он содержит навигацию, расположенную в заголовке.

Ниже приведен порядок загрузки файлов js. Целевой файл есть assets/js/components/nav/nav.js . Однако изменение этого порядка не решает проблему.

     <!--========== VUE ==========-->
    <script src="<?= url('assets') ?>/js/libraries/vue.js"></script>

    <!--========== SCRIPTS ==========-->   
    <script src="<?= url('assets') ?>/js/components/nav/nav.js" type="module" defer></script>
    <script src="<?= url('assets') ?>/js/shop.js" type="module" defer></script>
    <script src="<?= url('assets') ?>/js/script.js" type="module" defer></script>
    <script src="https://js.stripe.com/v3/" defer></script>