CODEWITHSUNDEEP
javascriptvuejs2vuetify.jsautoscroll
John
John

Reputation: 4981

Vuetify scroll after create element

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

Upvotes: 2

Views: 3838

Answers (2)

Awais Jameel
Awais Jameel

Reputation: 2206

Below is My Implementation. Works great for me...

gotToSection(elementId = null) {
    if (elementId) {
        this.$nextTick().then(() => {
            let scrollToElement = document.getElementById(elementId);
            // console.log(elementId, scrollToElement);
            if (scrollToElement) {
                this.$vuetify.goTo(scrollToElement, {
                    duration: 200,
                    offset: 0,
                    easing: "easeInOutCubic",
                    container: "#target-scroll-container"
                });
            }
        });
    }
}

Upvotes: 1

ittus
ittus

Reputation: 22393

You can use $nextTick to scroll after showing content:

clicked: function() {
  this.show = true;
  this.$nextTick(() => {
    this.$vuetify.goTo(this.target, this.options);
  });
}

Codepen demo

Upvotes: 3

Related Questions