When content in the q-scroll-area changes with v-for loop, it is impossible to scroll down to the bottom to see the last item when the data for the v-loop changes(items are added).
<template>
<!-- <q-scroll-area style="height: 320px; min-width: 350px; max-width: 380px;" ref="scroll">-->
<div ref="scroll" style="height: 320px; min-width: 350px; max-width: 380px; overflow: hidden scroll;">
<template v-for="m in messages" :key="m.id">
<q-chat-message :text="[m.text]">/q-chat-message>
</template>
</div>
<!-- </q-scroll-area>-->
</template>
<script>
import { defineComponent } from 'vue';
export default defineComponent({
name: 'ChatArea',
props: {
messages: {
type: Array,
required: true
},
},
computed: {
count() {
return this.messages.length
},
},
methods: {
scrollDown() {
// this.$nextTick(() => this.$refs.scroll.scrollTop = this.$refs.scroll.scrollHeight) // div wit htick
// this.$nextTick(() => this.$refs.scroll.setScrollPercentage("vertical", 1.0)) // scroll-area with tick
// this.$refs.scroll.scrollTop = this.$refs.scroll.scrollHeight // div without tick
// this.$refs.scroll.setScrollPercentage("vertical", 1.0) // scroll-area without tick
}
},
watch: {
count: {
flush: "post", // this or nextTick must be used
handler: function() {
this.scrollDown()
}
}
},
mounted() {
this.scrollDown()
}
})
</script>
Component above can use the area or simple div as example. The div will work but the scroll-area will not. It is important to use the $nextTick to invoke the scrolling behavior, or use flush:post on the watcher. Either will work but without it, both will not work. So even with this fix, the div started to work as expected but the scroll area did not. The bottom item was always below the visible area and the scroll bar was visibly not at the bottom.
Quasar version 2.0.0
When content in the q-scroll-area changes with v-for loop, it is impossible to scroll down to the bottom to see the last item when the data for the v-loop changes(items are added).
Component above can use the area or simple div as example. The div will work but the scroll-area will not. It is important to use the $nextTick to invoke the scrolling behavior, or use flush:post on the watcher. Either will work but without it, both will not work. So even with this fix, the div started to work as expected but the scroll area did not. The bottom item was always below the visible area and the scroll bar was visibly not at the bottom.
Quasar version 2.0.0