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

Question

我正在尝试添加一个锚标记以在滚动 800 像素后出现在屏幕上。我不确定我哪里出错了。请看一看。问题是 scrollpx 的值没有在滚动时更新。

<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>

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

我用下面这个简单的 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>

标签： javascriptvue.js

Answer 1

您缺少零件<script>周围的标签javascript：

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

编辑

你的br标签是错误的。</br>是不正确的。改成<br />