Vue Slider не работает внутри BootstrapVue Modal

Question

Когда я добавляю свой компонент в b-модал, панель VueSlider не работает, я думаю, из-за того, что не обновилась сама. В других примерах в Интернете некоторые люди давали полезные решения, но это не работает для меня.

      <div>
        <b-button v-b-modal.modal-1
                  class="text-color-black">
          Launch demo modal
        </b-button>

        <!-- Modal Component -->
        <b-modal id="modal-1">
          <filters ref="resumeFilterMobile">
          </filters>
        </b-modal>
      </div>

в компоненте фильтра у меня есть компонент Vue Slider

, что:

     <vue-slider class="dusk-slider"
              ref="sliderAgeRange"
              @callback="onChange"
              v-bind="config"
              :value="model">
     </vue-slider>

Как я могу решить это? что я могу сделать?

Answer 1

я нашел решение:)

во-первых, к модальному вы можете добавить:

<b-modal @shown="refreshSlide">Modal<b-modal>

после этого, к методам:

methods:{
  refreshSlide() {
    this.$refs.resumeFilterMobile.$children[3].$refs.sliderAgeRange.refresh();
  },

}

не забывайте, это мой случай. если у вас более простая структура отношений, вам просто необходим более простой код. как;

this.$refs.slider.refresh();