Question

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

因此，我以文档中的滚动示例为例。我使用一个函数来触发click事件，并在其中将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
    }
  }
})

我尝试使用setTimeout在this.show = true和this.$vuetify.goTo之间进行操作，但是很丑陋

Answer 1

显示内容后，您可以使用$nextTick进行滚动：

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

Codepen demo

创建元素后Vuetify滚动

1 个答案: