Level 28
Can you post your entire component please ?
Aug 18, 2020
4
Level 3
scrollIntoView on the search page
I have a simple problem, but I don’t know how to solve it.
My search page is done by axios, without realoading the page. When the user searches, the page must be scrolled down to the lowest id.
however, if a user searches and it returns nothing, the following query (which returns content) does not scroll down, as the gift has been dynamically updated. In this case, only the second click would take you down.
My code looks like this:
methods: {
buscar() {
axios.get('/api/buscarquery?lang='+document.documentElement.lang+'&chave='+this.keyword, {
})
.then(response => {
document.getElementById('buscou').scrollIntoView({ behavior: 'smooth' });
})
.catch( error => {
});
},
}
How do I make scrollIntoView work when the result is empty and, consequently, there is no scroll bar. Only after the data is inserted dynamically does the scroll bar appear, but my code doesn’t seem to recognize it at first, but on the second attempt.
can you help me ?
Level 3
<template>
<main class="q-ma">
<main class="section qs-o">
<section class="profile-link font-color">
<h1>{{ lang.title }}</h1>
<p>{{ lang.desc }}</p>
<div name="buscar">
<div class="input-wrapper with-icon">
<span v-if="!loading" @click.prevent="buscar()" class="fal fa-search"></span>
<span v-if="loading" class="fa-spin"></span>
<input @keyup.enter.prevent="buscar()" v-model="keyword" :placeholder="lang.inputPlaceh" required>
</div>
</div>
</section>
<main class="testimonials view">
<div class="container">
<h2 id="buscou" class="blog-h2">
{{ showTitle ? 'Você buscou por: '+keywordTitle : lang.sonhos }} </h2>
<section class="list">
<div class="testimonial" v-if="maisVistos" v-for="g in maisVistos">
<div class="meta">
<div class="avatar has-photo"><img :src="'/'+g.foto"></div>
<div class="meta-perfil-relatos">
<div><span aria-hidden="true" class="fas fa-calendar-alt"></span>0</div>
<div><span aria-hidden="true" class="fas fa-thumbs-up"></span>0</div>
<div><span aria-hidden="true" class="fas fa-comments"></span>85</div>
</div>
</div>
<div class="author">
<h2>{{ g.titulo }}</h2>
</div>
<div class="btn-sonhos"><a href="http://127.0.0.1:8022/pt-br/sonhos/sonhar-com-freud" class="btn btn-action">{{ lang.entrar }}<span aria-hidden="true" class="far fa-arrow-right"></span></a></div>
</div>
<div v-else class="not-result">
<p>Nenhum resultado</p>
</div>
</section>
</div>
</main>
</main>
</main>
</template>
<script>
export default {
props: ['lang'],
mounted(){
axios
.get('/api/buscar?lang='+document.documentElement.lang)
.then(response => (this.maisVistos = response.data.data))
},
data(){
return {
maisVistos: '',
keyword: '',
keywordTitle: '',
showTitle: false,
loading: false,
}
},
methods: {
buscar() {
this.loading = true;
axios.get('/api/buscarquery?lang='+document.documentElement.lang+'&chave='+this.keyword, {
})
.then(response => {
this.maisVistos = response.data;
this.showTitle = true;
this.keywordTitle = this.keyword;
document.getElementById('buscou').scrollIntoView({ behavior: 'smooth' });
this.loading = false;
})
.catch( error => {
this.loading = false;
if (error.response.status == 422) {
this.cadastrar.errors = error.response.data.errors;
}
});
},
}
}
</script>
Level 28
The problem is that this.maisVistos is being assigned an array of data fetched from the API, but the DOM doesn't actually refresh right away, so your scrollIntoView is actually executed before there is a scroll bar on the page. To solve that issue, you can wrap your scrollintoView logic in this.$nextTick's callback:
this.$nextTick(() => document.getElementById('buscou').scrollIntoView({ behavior: 'smooth' }));
this.$nextTick is only executed when the view has been re-rendered completely.
Side note: I would suggest using this.$refs.buscou instead of document.getElementById('buscou') to be in line with Vue standards. You will need to change id="buscou" to ref="buscou" in your HTML.
1 like
Level 3
Thanks (Y)
Please or to participate in this conversation.