Vue.js 2 template

by Gonzalo

HTML

Hola <span data-at-embedded=\"\" data-id=\"501cfe71-ff4c-4749-aef1-fe72d76722ca\" data-value=\"1.bbafac5b-333c-4fe7-8747-be52bec0517b\" contenteditable=\"false\"> <span class=\"tribute-mention badge badge-light\" id=\"501cfe71-ff4c-4749-aef1-fe72d76722ca\" data-index=\"1.bbafac5b-333c-4fe7-8747-be52bec0517b\"> Nombre completo <a onclick=\"(function (el) {\n                            el.parentNode.remove();\n                        })(this);\" href=\"javascript:void(0)\" title=\"Remove\" class=\"remove remove-kawak-tag\">×</a></span> </span>,<div><br></div><div>Hemos recibido tu solicitud de terminación de contrato suscrito entre GRUPO VIDAWA y <span data-at-embedded=\"\" data-id=\"93632aff-3e5d-41e3-abd2-ba98f5e2e2c7\" data-value=\"1.cb5c0a70-092e-44cc-b3ef-7dcf25658f9b\" contenteditable=\"false\"> <span class=\"tribute-mention badge badge-light\" id=\"93632aff-3e5d-41e3-abd2-ba98f5e2e2c7\" data-index=\"1.cb5c0a70-092e-44cc-b3ef-7dcf25658f9b\"> Empresa <a onclick=\"(function (el) {\n                            el.parentNode.remove();\n                        })(this);\" href=\"javascript:void(0)\" title=\"Remove\" class=\"remove remove-kawak-tag\">×</a></span> </span>, para lo cual daremos inicio al proceso de validación.</div><div><br></div><div>Te mantendremos informado sobre el proceso.</div><div><br></div><div>Gracias,</div><div><br></div><div>Equipo de Experiencia al Cliente</div><div>GRUPO VIDAWA&nbsp;</div><div><br></div>

CSS

.page {
  height: 1000px;
  padding: 20px;
  border: 2px solid yellow;
}

Babel + JSX

new Vue({
  el: '#app',
  methods: {
    goto(refName) {
    	var element = this.$refs[refName];
      console.log(element);
      var top = element.offsetTop;
      
      window.scrollTo(0, top);
    }
  }
})