Vue.js How to set scroll position back to top? - vue.js

Question

So whenever I click the "edit" button, a dialog pops up with a scrollbar where I can fill out information. But when I click "cancel" or "save" and then click that same "edit" button, the dialog pops up at the same scroll position. I would like to, every time when I click "edit" and the dialog opens up, be always at the top of the dialog page not where I left off last.
<template>
<!-- <div class="text-xs-center" v-if="storeState.admin" lazy> -->
<v-dialog
transition="dialog-bottom-transition"
scrollable
fullscreen
v-model="sheet"
v-if="storeState.admin"
lazy
persistent
>
<template v-slot:activator="{on}">
<v-btn flat color="green" dark icon v-on="on">
<v-icon>edit</v-icon>
</v-btn>
</template>
<div background-color="transparent" style="margin: auto auto 0 auto">
<v-card px-5 max-width="800px">
<v-card-title>
ADD SCHOLARSHIP
</v-card-title>
<v-form v-model="addDisabled" validation ref="editForm">
<v-container>
<v-layout wrap>
<v-flex
xs12
md4
>
<v-text-field
v-model="scholarship.title"
label="Scholarship name"
:counter="maxLength"
:rules="[maxLength_rules.max, minLength_rules.min]"
required
></v-text-field>
</v-flex>
<v-flex xs12 md4>
<v-text-field
v-model="scholarship.faculty"
label="Faculty"
:counter="maxLength"
:rules="[maxLength_rules.max, minLength_rules.min]"
required
></v-text-field>
</v-flex>
<v-flex xs12 md4>
<v-text-field
v-model="scholarship.dollarAmount"
label="Award amount"
required
:rules="[amount_rules.range, minLength_rules.min]"
></v-text-field>
</v-flex>
<v-flex ml-2 xs12 sm6 md4>
<v-menu
ref="menu2"
v-model="menu2"
:close-on-content-click="false"
:nudge-right="40"
:return-value.sync="availableDate"
transition="scale-transition"
offset-y
full-width
min-width="290px"
>
<template v-slot:activator="{ on }">
<v-text-field
v-model="scholarship.available"
label="Date Available"
prepend-icon="event"
:rules="[minLength_rules.min]"
readonly
v-on="on"
></v-text-field>
</template>
<v-date-picker v-model="availableDate" no-title scrollable>
<v-spacer></v-spacer>
<v-btn flat color="primary" #click="menu2 = false">Cancel</v-btn>
<v-btn flat color="primary" #click="$refs.menu2.save(availableDate)">OK</v-btn>
</v-date-picker>
</v-menu>
</v-flex>
<v-flex ml-2 xs12 sm6 md4>
<v-menu
ref="menu1"
v-model="menu1"
:close-on-content-click="false"
:nudge-right="40"
:return-value.sync="dueDate"
transition="scale-transition"
offset-y
full-width
min-width="290px"
>
<template v-slot:activator="{ on }">
<v-text-field
v-model="scholarship.deadline"
label="Due Date"
prepend-icon="event"
readonly
:rules="[minLength_rules.min]"
v-on="on"
></v-text-field>
</template>
<v-date-picker v-model="dueDate" no-title scrollable>
<v-spacer></v-spacer>
<v-btn flat color="primary" #click="menu1 = false">Cancel</v-btn>
<v-btn flat color="primary" #click="$refs.menu1.save(dueDate)">OK</v-btn>
</v-date-picker>
</v-menu>
</v-flex>
<v-flex xs12 md1>
<v-text-field
v-model="scholarship.requiredGpa"
label="Min GPA"
required
:rules="[gpa_rules.range, minLength_rules.min]"
></v-text-field>
</v-flex>
<v-flex xs12>
<v-textarea
outline
height="400"
v-model = "scholarship.description"
label="Scholarship Description"
:rules="[minLength_rules.min]"
></v-textarea>
</v-flex>
</v-layout>
</v-container>
</v-form>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn flat #click="sheet = false" >cancel</v-btn>
<v-btn color="primary" #click="updateFields(scholarship)" :disabled="!addDisabled" flat >SAVE</v-btn>
</v-card-actions>
</v-card>
</div>
</v-dialog>
<!-- </div> -->
</template>
<script>
import { store } from "../store.js";
import EDITSCHOLARSHIP from '../graphql/updateScholarship.gql'
export default {
data: () => ({
sheet: false,
valid: false,
dueDate: '',
availableDate: '',
storeState: store.state,
addDisabled: true,
menu1: '',
menu2: '',
gpa: '',
title: '',
faculty: '',
amount: '',
maxLength: 255,
description: '',
gpa_rules: {
range: v => v <= 4.00 && v >= 0.00 && v.length <=4 || 'GPA may only be within 0.00 - 4.00',
},
amount_rules: {
range: v => v <= 999999999.00 && v >= 0.00 || 'Amount must only contain numbers between 0.00 - 999999999.00',
},
maxLength_rules: {
max: v => v.length <= 255|| 'Max character length is 255',
},
minLength_rules: {
min: v => v.length > 0 || 'Required',
}
}),
props: {
scholarship: Object
},
methods: {
validate () {
if (this.$refs.editForm.validate()) {
this.addDisabled = false
}
},
editScholarship(scholarship) {
if (this.$refs.editForm.validate()) {
this.$apollo.mutate({
mutation: EDITSCHOLARSHIP,
variables: {
id: scholarship.id,
input: {
available: this.availableDate,
deadline: this.dueDate,
description: this.description,
dollarAmount: this.amount,
faculty: this.faculty,
requiredGpa: this.gpa,
title: scholarship.title,
visible: true,
}
}
}).then( (data) => {
this.$emit('showSnackbar', 'Scholarship successfully updated', 'success')
this.sheet = false
}).catch( (error) => {
this.$emit('showSnackbar', 'Scholarship update failed', 'error')
//this.text = error
//this.color = "error"
//this.snackbar = true
})
}
},
updateFields (scholarship) {
this.dueDate = scholarship.deadline
this.availableDate = scholarship.available
this.gpa = scholarship.requiredGpa
this.title = scholarship.title
this.faculty = scholarship.faculty
this.amount = scholarship.dollarAmount
this.description = scholarship.description
this.editScholarship(scholarship)
}
}
}
</script>
<style>
.scroll {
overflow-y: auto;
}
</style>

Answer 1

This is intended behavior. If the dialog box is not removed from the DOM when closed, its previous state will be retained unless otherwise modified.
You can choose one between three approaches I can think of in hindsight, 2 of which are what you are looking for.
Destroy the modal when not in use and re-instantiate when opening. A simple v-if toggling a boolean would do the trick, or a this.$destroy if your dialog box is a separate vue instance.
Add this.$el.scrollTop = 0 on your submit or cancel events. (A*)
Add scrollWrapper.scrollTop = 0 on your open dialog box method. (B*)
A: this.$el on item number 2 will only work if you are scrolling in the $el element, otherwise, you can access the target element using this.$el.querySelector('.scroll-wrapper')
B: Same as item number 2, but this uses vanilla JS references instead of relying on Vue, you should refer to your actual scroll wrapper.

Answer 2

Please add this code to the event to enable in your dialog.
this.$refs.editForm.$el.scrollIntoView({behavior: 'smooth'})