Как вызвать метод в компоненте?

Question

[Artem0071]

Пытаюсь прикрутить эту штуку.

Компонент у меня находится в скрытом компоненте.
По этому поводу в документации сказано:

After the component appears, to call the refresh method.

Как мне вызвать этот самый refresh метод?

Answer 1

[Evgeny Kulakov]

Если вы используете v-show для скрытия, то узнать имхо не получиться, когда компонент появляется. В этом случае используйте доп. свойство для передачи в компонент состояния видимости. Или используйте v-if, тогда можно в событии mounted() вызвать refresh.

Comments

[Artem0071]

Я просто не понимаю как вызвать этот refresh
Это метод компонента или что вообще?

[Evgeny Kulakov]

Ну да, т.е. у вас есть ваш компонент внутри которого сидит этот слайдер:

<template>
  <div>
    <vue-slider ref="slider" v-model="value"></vue-slider>
  </div>
</template>

Внутри события mounted(), например, можно дернуть метод refresh этого слайдера:

mounted() {
  this.$refs.slider.refresh()
}

[Artem0071]

Я понял, но почему то все равно не работает
Ну да ладно, создам свой велосипед
Спасибо большое!)

[Evgeny Kulakov]

Покажите код, разберемся)

[Artem0071]

окей, давай попробуем)
вот код

<li class="dropdown">
  <a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
    <i class="icon-volume-medium"></i>
  </a>
  <div class="dropdown-menu dropdown-content">
    <ul class="media-list dropdown-content-body width-350">
      <li class="media">
        <div class="media-body">
          <vue-slider 
            :real-time="true" 
            ref="slider1" 
            v-bind="player" 
            v-model="player.value">
          </vue-slider>
        </div>
      </li>
      <li class="media">
        <div class="media-body">
          <vue-slider 
            :real-time="true" 
            :refresh="this" 
            ref="slider" 
            v-bind="volume" 
            v-model="volume.value">
          </vue-slider>
        </div>
      </li>
    </ul>
  </div>
</li>

Т.е этот компонент у меня как бы в выпадающем списке
Вот что в data()

return {
          volume:{
            value: 50,
            width: 100,
            height: 8,
            dotSize: 20,
            min: 1,
            max: 100,
            interval: 0.5,
            disabled: false,
            show: true,
            speed: 0.3,
            reverse: false,
            lazy: true,
            tooltip: false,
            piecewise: false,
          },
          player: {
            value: 1,
            width: "100%",
            height: 8,
            dotSize: 20,
            min: 1,
            max: 100,
            interval: 0.5,
            disabled: false,
            show: true,
            speed: 0.3,
            reverse: false,
            lazy: true,
            tooltip: false,
            piecewise: false,
          }
        }

Ну и собственно mounted

mounted(){
        this.$refs.slider.refresh;
      }

Компонент начинает себя нормально вести только после того, как я по нему кликну, а до этого у него ползунки все влево переведены, хотя в параметрах указал на середину

[Evgeny Kulakov]

Dropdown через v-if отображается? Если да, то this.$refs.slider.refresh - скобок нет. Смысл вот этого тоже не понял - :refresh="this"..

[Artem0071]

Evgeny Kulakov: нет, это сделано при помощи обычного бутстрапа
:refresh="this" - это остаток от моих проб)
убрал
скобки ставил и убирал, ничего не помогло(

[Evgeny Kulakov]

Ясно, смысл в том, что у вас mounted только один раз вызывается при попадании элемента в dom, далее открытие/закрытие меню происходит через бутстрап и vue об этом ничего не знает.
Как вариант добавить слушателя на кнопку открытия меню и далее привязать обработчик обновления слайдера, типа вот так:

в компоненте:

mounted() {
 this.$el.querySelector('.dropdown-toggle').addEventListener('click', this.toggleHandler)
},
beforeDestroy() {
 this.$el.querySelector('.dropdown-toggle').removeEventListener('click', this.toggleHandler)
},
methods: {
 toggleHandler() {
 console.log('call refresh')
 this.$refs.slider.refresh()
}
}

Вообще не очень хорошая практика имхо смешивать bootstrap и vue. Как вариант взять только css от bootstrap, а компоненты, которые используют js реализовывать самому. Или взять какой-нить vue-bootstrap

[Artem0071]

Evgeny Kulakov: по нажатию в консоли выскакивает 'call refresh', но все равно не работает..

[Artem0071]

Evgeny Kulakov: переделал чтобы использовалось v-if. Теперь заработало
Спасибо Вам большое что помогали)