时间戳

首页 > 解决方案 > Vue 2 - 如何在正确的时间正确地实例化

vue.js - Vue 2 - 如何在正确的时间正确地实例化

问题描述

我的应用程序的 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

我通过在实例化该组件的根实例之前添加一点超时（200ms）来“解决”这个问题，但这似乎是一个混乱而脆弱的解决方案。有什么干净的方法可以在正确的时间实例化吗？我需要这个实例尽快准备好，因为它包含位于标题中的导航。

下面，找到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>

标签： vue.js

解决方案

推荐阅读