Свиток Vuetify после создания элемента - PullRequest
Новая
       8

Свиток Vuetify после создания элемента

0 голосов
/ 21 января 2019

Я пытаюсь выполнить автопрокрутку, используя vuetify внутри события шины, но это не работает.Я попытался воспроизвести мою проблему на codepen одним событием щелчка (с именем clicked). У меня такое же поведение: 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, это работает, но это уродливо

1 Ответ

0 голосов
/ 22 января 2019

Вы можете использовать $nextTick для прокрутки после отображения содержимого: 

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

Кодовая демонстрация

...