VueJS - Easy (2-liner) to scroll to specific element using VueJS and no external libraries

This is my answer to a question on StackOverflow: https://stackoverflow.com/a/57661780/4826740

by Mostafa Zeinivand

HTML

<script src="https://unpkg.com/vue/dist/vue.js"></script>

<div id="app">  
  <button v-on:click="scrollToElement({behavior: 'smooth', block: 'center', inline: 'center'})">
    Scroll to first element with class of .index-50
  </button>
  
  <button v-on:click="scrollToElement({behavior: 'smooth', block: 'center', inline: 'center'})">
    Smooth scroll to first element with class of .index-50
  </button>
  
  <ul v-for="(item, index) in items" :class="`index-${index}`">
      <li :class="{active: index === 50}">{{ item }}</li>
  </ul>
</div>

CSS

.active {
  background: red;
}

JavaScript

// See this post on StackOverflow:
// https://stackoverflow.com/a/57661780/4826740

var vm = new Vue({
  el: '#app',
  data: {
    items: []
  }, 
  methods: {
    scrollToElement(options) {
      const el = this.$el.getElementsByClassName('index-50')[0];
      
      if (el) {
        el.scrollIntoView(options);
      }
  },
    populate: function() {
    	for(var i = 0; i<100; i++) {
        this.items.push("Item #"+i);
      }    
    }
  }
});
vm.populate();