web-dev-qa-db-ja.com

vue nuxtjsでスクロールイベントを聞く方法は？

私は解決策を探して、このコードを思いついた

methods: {
  handleScroll () {
    console.log(window.scrollY)
  }
},
created () {
  window.addEventListener('scroll', this.handleScroll);
},
destroyed () {
  window.removeEventListener('scroll', this.handleScroll);
}

残念ながら、これは私にはうまくいきません。また、ウィンドウをdocument.bodyに変更しようとしました。

エラーメッセージはWindow is not defined

vue.jsnuxt.js
6
devhermluna

nuxt JSはサーバー側でレンダリングされるため、windowは未定義です。

したがって、process.browser変数を使用して試してください

methods: {
  handleScroll () {
    console.log(window.scrollY)
  }
},
created () {
    if (process.browser) { 
        window.addEventListener('scroll', this.handleScroll);
    }
},
destroyed () {
    if (process.browser) { 
        window.removeEventListener('scroll', this.handleScroll);
    }
}

詳細については、 リンク を参照してください

16
Vamsi Krishna

windowまたはcreatedでbeforeCreateまたはその他のブラウザ固有のAPIを使用すると、documentやwindowなどのプラットフォーム固有のAPIがサーバー（SSRが発生する場所）で使用できないため、問題が発生します。代わりに、ロジックを作成済みからbeforeMountに移動します。作成したままにしてprocess.browserで確認することもできますが、それほどクリーンではなく、混乱を招きやすいです。

export default {
  methods: {
    handleScroll () {
      // Your scroll handling here
      console.log(window.scrollY)
    }
  },
  beforeMount () {
    window.addEventListener('scroll', this.handleScroll);
  },
  beforeDestroy() {
    window.removeEventListener('scroll', this.handleScroll);
  }
}

サーバーとクライアントの両方でcreatedとbeforeCreateのみが実行されます。したがって、beforeMountまたはbeforeDestroyのifを保護する必要はありません。

さらに読む ssr-ready Vue components

13
manniL