Click button and go to page section in Vue.js

Question

I want to implement a button that automatically scrolls to a specific div id="contactMe", which is located on the same page. I am using vue.js.

I tried the following method with native js.

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

However, I receive the following error in my console.

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

What is the right command in the vue framework?

Answer 1

Don't use input[type="submit"] as it only should submit the form. A simple button would do with the correct Vue events:

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>