I am using Laravel 7, Vue,js 2 and Bootstrap 4,
When I click a form I would like that the view scrolls to a specific element of the page selected by class in case of success.
That because I would like that the user visualizes immediately the success of the submission and because the message of success is located at the top of the page and the form submission button is located at the bottom.
This is the function that follows the submission of the form:
insertMeeting: function() {
axios.post('api/store_meeting', this.formMeeting)
.then((response) => {
this.errors = response.data;
if (Object.keys(this.errors).length === 0) {
this.success = true;
var el = this.$el.getElementsByClassName("alert-success")[0];
console.log(el); //<div class="alert alert-success" style="">The meeting has been created.</div>
el.scrollIntoView(); //problem
this.formMeeting = {};
} else {
this.success = false;
}
})
.catch(error => {
this.success = false;
console.log(error);
});
When I console.log
the element of the class alert-success
appears the right element... so I suppose that the problem is the method scrollIntoView()
. Can help?
question from:
https://stackoverflow.com/questions/65603132/hot-to-scroll-to-a-specific-class-element-with-vue-js 与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…