vue-slide-bar не работает внутри модального загрузчика

Question

Я использовал vue-slide-bar 2 места в моем проекте. Один внутри обычного компонента, который вызывается на странице, а другой внутри модального загрузчика. Тот, что находится внутри модуса начальной загрузки, не инициализируется, пока я не изменю размер моего экрана. Вот мой код для vue-slide-bar.

 components: {
    VueSlideBar
  },

data() {
  return {
    sliderCustomzie: {
        lineHeight: 1,
        processStyle: { 
          backgroundColor: '#1FA0FB' 
        },
        tooltipStyles: { 
          backgroundColor: '#1FA0FB',
          borderColor: '#1FA0FB' 
        }
      },
      sliderWithLabel: {
        data: [
          1,
          2,
          8
        ],
        range: [
          {
            label: 'Poor'
          },
          {
            label: 'Fair',
            isHide: true
          },
          {
            label: 'Mint'
          }
        ],
        rangeValue: {}
      },

и HTML-файл в .vue

<vue-slide-bar ref="slider" v-model="sliderWithLabel.value"
                            :processStyle="sliderCustomzie.processStyle"
                            :lineHeight="sliderCustomzie.lineHeight"
                            :tooltipStyles="sliderCustomzie.tooltipStyles"
                            :data="sliderWithLabel.data"
                            :range="sliderWithLabel.range"
                            @callbackRange="callbackRange">
                    </vue-slide-bar>

Answer 1

Используйте это в методах.

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

Называйте его после открытия модала. Проблема в том, что он инициализируется до того, как модальное устройство действительно откроется. Так что нам нужно инициализировать его после открытия модала, Это должно решить вашу проблему:)