html - 单击按钮并转到 Vue.js 中的页面部分

Question

我想实现一个自动滚动到位于同一页面上的特定 div id="contactMe" 的按钮。我正在使用 vue.js。

我用原生js尝试了下面的方法。

    <input
        onClick="document.getElementById('contactMe').scrollIntoView();"
        type="submit"
        class="cta-button bg-yellow mt-8 flex justify-center"
        :value="$frontmatter.contactFormButton"
      />

但是，我在控制台中收到以下错误。

Uncaught TypeError: Cannot read property 'scrollIntoView' of null at HTMLInputElement.onclick ((index):1)

vue框架中正确的命令是什么？

Answer 1

不要使用 input[type="submit"] 因为它只应提交 form。一个简单的 button 可以处理正确的 Vue 事件:

new Vue({
  el: '#app',
  data: {
    buttonText: 'Lorem'
  },
  methods: {
    scroll() {
      const element = document.getElementById('contact-me');
      element.scrollIntoView({ behavior: 'smooth' });
    }
  }
})

body {
  background: #20262E;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
}

#contact-me {
  margin-top: 2000px;
  margin-bottom: 2000px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <button @click="scroll">{{ buttonText }}</button>
  
  <div id="contact-me">
    contact me box
  </div>
</div>