javascript - Vue2错误 'classList'为空错误

Question

所以我正在 Vue 中扭动一个组件。只是一个简单的导航。通过方法，我制作了一个事件脚本。我还制作了一个“创建的”loadfunction 脚本并控制台它的元素。

它在控制台中给出以下错误:

TypeError: Cannot read property 'classList' of null
at VueComponent.created (eval at <anonymous> (app.js:1002), <anonymous>:23:67)
at callHook (eval at <anonymous> (app.js:672), <anonymous>:2275:21)
at VueComponent.Vue._init (eval at <anonymous> (app.js:672), <anonymous>:3758:5)
at new VueComponent (eval at <anonymous> (app.js:672), <anonymous>:3922:12)
at createComponentInstanceForVnode (eval at <anonymous> (app.js:672), <anonymous>:3117:10)
at init (eval at <anonymous> (app.js:672), <anonymous>:2925:45)
at createComponent (eval at <anonymous> (app.js:672), <anonymous>:4656:9)
at createElm (eval at <anonymous> (app.js:672), <anonymous>:4599:9)
at createChildren (eval at <anonymous> (app.js:672), <anonymous>:4724:9)
at createElm (eval at <anonymous> (app.js:672), <anonymous>:4632:9)

奇怪的是，当我删除 .classList 时，它仍然给出一个 null 值，而不是一个空数组。

这是我的组件代码(注意这是荷兰语):

<script>
export default {
    name: 'frontnav',
    data () {
        return {
            aantal: [
                'Aankomende Gasten',
                'In Huis',
                'Vertrekkende Gasten',
                'Dag Gasten'],
            dag: [
                'Vandaag',
                'Morgen',
                'Overmorgen',
                'Deze Week',
                'Volgende Week'],
            active: 'Aankomende Gasten'
        }
    },
    methods: {
        makeActive: function (aantal) {
            this.active = aantal;
            let el = document.querySelector('nav tr a:first-child');
            document.querySelector('.' + item).classList.add('active');
        },
        loadfunction: function () {
           const el = document.querySelector('nav a:first-child');
           el.classList.add('active');
        }
    },
    created () {
       this.loadfunction();
        console.log(document.querySelector('nav tr a:first-child').classList);
    }
}

Answer 1

将created()更改为mounted()。

如果你正在操作 DOM，你最好等待它。