vue如何修改js中的getBoundingClientRect方法

Question

我想在vue项目里加一个滚动时间轴，找到一个好看的JavaScript版本的，想自己动手修改成vue的，但是出来这个报错。

<script>
export default {

name: 'info',
data(){
    return{
        el:null
    }
},
mounted() {
                this.isElementInViewport(this.el)
                this.callbackFunc()
                this.addEvent()
            },
methods :{
isElementInViewport(el) {
    let obj = el.target
        let rect = obj.getBoundingClientRect();

return (

rect.top >= 0 &&
rect.left >= 0 &&
rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
rect.right <= (window.innerWidth || document.documentElement.clientWidth));
},
callbackFunc() {
       let items = document.querySelectorAll(".timeline li");
       for (let i = 0; i < items.length; i++) {
if (this.isElementInViewport(items[i])) {
  if(!items[i].classList.contains("in-view")){
    items[i].classList.add("in-view");
  }
} else if(items[i].classList.contains("in-view")) {
    items[i].classList.remove("in-view");
}
 }

},
addEvent(){

  window.addEventListener("load", this.callbackFunc);
  window.addEventListener("scroll", this.callbackFunc);

}

}

}
</script>

上面是我自己修改的，下面是源码

<script>
var items = document.querySelectorAll(".timeline li");

function isElementInViewport(el) {
  var rect = el.getBoundingClientRect();
  return (
    rect.top >= 0 &&
    rect.left >= 0 &&
    rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
    rect.right <= (window.innerWidth || document.documentElement.clientWidth)
  );
}

function callbackFunc() {
  for (var i = 0; i < items.length; i++) {
    if (isElementInViewport(items[i])) {
      if(!items[i].classList.contains("in-view")){
        items[i].classList.add("in-view");
      }
    } else if(items[i].classList.contains("in-view")) {
        items[i].classList.remove("in-view");
    }
  }
}
 
window.addEventListener("load", callbackFunc);
window.addEventListener("scroll", callbackFunc);
</script>

问题出现的环境背景及自己尝试过哪些方法

相关代码

粘贴代码文本（请勿用截图）

你期待的结果是什么？实际看到的错误信息又是什么？

Answer 1

this.el -> this.$el

细心哇少侠！