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滑块组件

这是：

     <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();