Javascript 在vue中滚动时未更新scrollpx的值

我试图添加一个锚标签，在滚动800px后出现在屏幕上。我不确定我会错在哪里。请看一看。问题是scrollpx的值没有在scroll上更新

<template>
 <div id="moveTop">
 <div>
  <v-layout row wrap>
    <v-flex xs12 sm12 lg12>
      <b><p class="text-xs-center headings">Statement</p></b>
      </br>
      </br>
      <b><p class="text-xs-center">Statement 2</p></b>
      </br>
      <p>
        <b class="headings">Statement3</b>
      </br>
      </br>
        Statement 4
      </p>
    </v-flex>
  </v-layout>
  <div id="scrollButton"> 
    <a class="scrollTop" href="javascript:document.getElementById('moveTop').scrollIntoView(true);" title='Click here to go to the top' v-if="scrollpx > 800"><img src="../../images/upwards.svg"></a>
  </div>    
  </div>
 </div>
</template> 

<script>

export default {    
data() {
  return {
    scrollpx: 0
  };
},
methods: {
  handleScroll() {
    this.scrollpx = window.scrollY;
  }
},
created() {
  window.addEventListener('scroll', this.handleScroll);
},
destroyed() {
  window.removeEventListener('scroll', this.handleScroll);
}
}; 
</script>

声明





语句2




声明3




报表4

导出默认值{
数据（）{
返回{
滚动px:0
};
},
方法：{
handleScroll（）{
this.scrollpx=window.scrollY；
}
},
创建（）{
window.addEventListener（'scroll'，this.handleScroll）；
},
销毁（）{
window.removeEventListener（'scroll'，this.handleScroll）；
}
}; 

这就是页面的确切布局。希望我能提供所有必要的信息

我用下面这个简单的vue文件进行了尝试，但仍然不起作用

<template>
  <div id="moveTop">
    <div>
      <v-layout row wrap>
        <v-flex xs12 sm12 lg12 >             
          <p>Statement</p>
          <p>Statement</p>
          <p>Statement</p>
          <p>Statement</p>
          <p>Statement</p>
          <p>Statement</p>
          <p>Statement</p>
          <p>Statement</p>
          <p>Statement</p>
          <p>Statement</p>
        </v-flex>
      </v-layout>
      <div id="scrollButton"> 
        <a class="scrollTop" href="javascript:document.getElementById('moveTop').scrollIntoView(true);" title='Click here to go to the top' v-if="scrollpx > 800"><img src="../../images/upwards.svg"></a>
      </div>   
    </div>
  </div>
</template>

声明

声明

声明

声明

声明

声明

声明

声明

声明

声明

您在
javascript
部分周围缺少
标记：

<script>
export default {  
...
</script>


导出默认值{
...

编辑

您的
br
标记错误。

不正确。更改为

这就是我如何使它工作的

<script>
  export default {    
    data() {
      return {
        scrollpx: 0
      };
    },
    methods: {
      handleScroll() {
        this.scrollpx = document.body.scrollTop;
      }
    },
    mounted() {
      document.body.addEventListener('scroll', this.handleScroll);
    } 
  };

</script>


导出默认值{
数据（）{
返回{
滚动px:0
};
},
方法：{
handleScroll（）{
this.scrollpx=document.body.scrollTop；
}
},
安装的（）{
document.body.addEventListener（'scroll'，this.handleScroll）；
} 
};
在此处测试并正常工作：-滚动并检查console@T.Short你知道我到底做错了什么吗？你在控制台中看到错误了吗？@T.Short没有错误。我在vue chrome扩展中检查了它。scrollpx的值没有改变。@T.Short在你尝试的代码中，将scrollpx的默认值设置为0，值为shou卷轴上的ld增加我有脚本标签。我只是忘了在问题中写它。我现在更新了问题。你知道这个问题吗？