nuxtにhtml2canvas導入時のエラー

Question

nuxtにhtml2canvasを導入しようとしているんですが下記のエラーが出てしまいます。

onloadがまずいのか,がまずいのかエラーの意味がよくわからず。。。コード自体は下記を対象のpages/index.vueに記述しています。こちらのhtml2canvasについて書かれた記事を参考にしてnuxtに導入しようとしています。

https://qiita.com/youwht/items/8b681a856f59aa82d671

<script>
import Header from '~/components/Header.vue'

export default {
  name: 'Reveal',
  components: {
    Header
  },
  data: () => ({
    menuVisible: false,
    event_name1: '',
    selectedDate1: '',
    event_name2: '',
    selectedDate2: '',
    event_name3: '',
    selectedDate3: ''
  }),

  //ロードされた際の処理として実施：
  window.onload = function(){
    //HTML内に画像を表示
    html2canvas(document.getElementById("target"),{
      onrendered: function(canvas){
        //imgタグのsrcの中に、html2canvasがレンダリングした画像を指定する。
        var imgData = canvas.toDataURL();
        document.getElementById("result").src = imgData;
      }
    });
    //ボタンを押下した際にダウンロードする画像を作る
    html2canvas(document.body,{
      onrendered: function(canvas){
        //aタグのhrefにキャプチャ画像のURLを設定
        var imgData = canvas.toDataURL();
        document.getElementById("ss").href = imgData;
      }
    });
  }

}
</script>

Answer 1

methodsで定義して、mountedでDOMの構築後に実行できるみたいです。

export default {

  mounted : function(){
    this.window_onload();
  },
  methods:{
    window_onload:function() {  
      console.log("Hello");
    },
  }

}

参考：Vuejs APIアクセスはcreatedとmountedのどちらで行う？