创建元素后验证滚动

Question

我正在尝试通过在总线事件中使用 vuetify 来进行自动滚动，但这不起作用。我试图通过单击事件（名为 clicked）在 codepen 上重现我的问题我有相同的行为：https://codepen.io/anon/pen/MLgRBz?&editable=true&editors=101

所以我从文档中获取了滚动示例。我使用一个函数来触发点击事件，并在内部将 show 变量设置为 true，然后我使用 goTo 函数进行滚动。问题是，我必须在按钮上单击两次才能滚动，因为没有创建 DOM。我能怎么做？还有另一个事件需要知道 v-if 指令何时创建元素？

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
    }
  }
})

我尝试在 this.show = true 和 this.$vuetify.goTo 之间使用 setTimeout 来实现它，但它很丑

Answer 1

您可以在显示内容后使用$nextTick滚动：

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

Codepen demo

Answer 2

下面是我的实现。非常适合我...

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"
                });
            }
        });
    }
}

创建元素后验证滚动

Vuetify scroll after create element

javascript

vuejs2

vuetify.js

autoscroll