时间戳

首页 > 解决方案 > 如何在 Vue created() 钩子中使用原生 javascript 方法？

javascript - 如何在 Vue created() 钩子中使用原生 javascript 方法？

问题描述

我正在创建简单的 Vue.js 应用程序我正在使用 Vue cli 3，我想使用本机 DOM 方法来观察滚动行为，一切正常，但是当我更改路由器视图时出现问题，然后控制台抛出错误Uncaught TypeError: Cannot read property of undefined 我做错了吗？

 created() {
    /* contorl slider scroll height and give navbar fixed positiom */
    window.addEventListener("scroll", ()=>{
    var firstbox = document.getElementById("sliderBox");
      if (window.scrollY >= firstbox.scrollHeight) {
        this.isVisiable = true
      } else {
        this.isVisiable = false
      }
    
});
  },

标签： javascriptvue.js

解决方案

老实说，我无法确切理解您的问题是什么，但我认为您使用addEventListener的方式不正确，如果您想在created()钩子中使用它，还需要在路由更改后销毁它，在 Vue2 中您可以使用destroyed()钩子，但是在Vue3中你可以使用unmounted()，希望这对你有帮助

  
  methods:{
  yourFunction() {
      var firstbox = document.getElementById("sliderBox");
      if (window.scrollY >= firstbox.scrollHeight) {
        //do something
      } else {
        //do something
      }
    }
  }

  
  created() {

    window.addEventListener("scroll", this.yourFunction);
  },

  unmounted(){
    window.removeEventListener("scroll", this.yourFunction)
  }

.

推荐阅读