I'm trying to do autoscroll by using vuetify inside bus event but this doesnt't work. I tried to reproduce my problem on codepen with just a click event (named clicked) I have the same behavior : https://codepen.io/anon/pen/MLgRBz?&editable=true&editors=101
So I took the scroll example from the doc. I use a function to trigger the click event and inside I set the show variable to true then I use goTo function to scroll. The problem is, I have to click twice on the button to scroll because the DOM isn't created. how can I do ? There is another event to know when v-if directive create the element ?
const easings = {
linear: '',
easeInQuad: '',
easeOutQuad: '',
easeInOutQuad: '',
easeInCubic: '',
easeOutCubic: '',
easeInOutCubic: '',
easeInQuart: '',
easeOutQuart: '',
easeInOutQuart: '',
easeInQuint: '',
easeOutQuint: '',
easeInOutQuint: ''
}
new Vue({
el: '#app',
data () {
return {
type: 'number',
number: 9999,
selector: '#first',
selected: 'Button',
elements: ['Button', 'Radio group'],
duration: 300,
offset: 0,
easing: 'easeInOutCubic',
easings: Object.keys(easings),
show: false
}
},
methods: {
clicked: function() {
this.show = true;
this.$vuetify.goTo(this.target, this.options);
}
},
computed: {
target () {
const value = this[this.type]
if (!isNaN(value)) return Number(value)
else return value
},
options () {
return {
duration: this.duration,
offset: this.offset,
easing: this.easing
}
},
element () {
if (this.selected === 'Button') return this.$refs.button
else if (this.selected === 'Radio group') return this.$refs.radio
}
}
})
I tried to do it with setTimeout between this.show = true and this.$vuetify.goTo it works but it's ugly
You can use $nextTick to scroll after showing content:
clicked: function() {
this.show = true;
this.$nextTick(() => {
this.$vuetify.goTo(this.target, this.options);
});
}