Vue2エラー 'classList' of nullエラー

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

変更mounted()からcreated()。

DOMを操作する場合は、DOMを待つ方が良いでしょう。

Answer 2

はちょうどconst el = document.querySelector('nav a:first-child');

Allが収集作ることが分かりました。 ：/

それはあなたがここにVueの中に欲しいものを行うには簡単な方法があります

const el = document.querySelectorAll('nav a:first-child');