Estoy usando Vuejs 2 con vuetify.
Tengo un área de texto y lleno su contenido en 'montado'. Necesito desplazarme hasta la parte superior del contenido del área de texto cuando hago clic en un botón. Estoy probando el siguiente código, pero no miro.
<template>. <div> <v-btn @click.stop="testScroll">Test</v-btn> <v-textarea ref="atend" v-model="obs" label="Text" outlined hide-details rows="3" ></v-textarea> </div> </template> <script .... data:()=>( {obs:null} ), mounted(){ this.obs="My text with ten or more lines" }, methods:{ testScroll() { const textarea = this.$refs.atend textarea.scrollTop = 0 this.$refs.atend.focus() } } </script>Puedes probar con getElementById y setSelectionRange :
new Vue({ el: '#app', vuetify: new Vuetify(), data:()=>( {obs:null} ), mounted(){ this.obs = `My text with ten or more lines My text with ten or more lines My text with ten or more lines My text with ten or more lines My text with ten or more lines My text with ten or more lines My text with ten or more lines My text with ten or more lines My text with ten or more lines` }, methods:{ testScroll(e) { const input = document.getElementById('doc'); input.scrollTop = 0 input.focus() input.setSelectionRange(0,0) } } }) <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet"> <link href="https://cdn.jsdelivr.net/npm/@mdi/font@6.x/css/materialdesignicons.min.css" rel="stylesheet"> <link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet"> <div id="app"> <v-app> <v-main> <v-container> <div> <v-btn @click.stop="testScroll($event)">Test</v-btn> <v-textarea ref="atend" v-model="obs" label="Text" outlined hide-details rows="3" id="doc" ></v-textarea> </div> </v-container> </v-main> </v-app> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script> <script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>Prueba esto
<v-textarea id="atend" ref="atend" v-model="obs" label="Text" outlined hide-details rows="3" ></v-textarea> testScroll() { document.getElementById("atend").scrollIntoView({ block: "start" }); }