Как использовать компонент vue-slider в Laravel 5.6

я хотел бы добавить слайдер в свою панель. Я недоволен

npm install vue-slider-component --save

а затем я создал новый компонент и app.js

В моем компоненте Slider.vue я добавил шаблон старта

<template>
  <div>
    <vue-slider ref="slider" v-bind="options" v-model="value"></vue-slider>
    <h3><small>Value: </small>{{ options.value }}</h3>
  </div>
</template>

и импортировал vueSlider

<script>
  import vueSlider from 'vue-slider-component'

  export default {
    components: {
      vueSlider
    },

    data() {
      return {
        options: {
          value: 5,
          width: 'auto',
          height: 6,
          direction: 'horizontal',
          dotSize: 16,
          eventType: 'auto',
          min: 5,
          max: 100,
          interval: 5,
          show: true,
        }
      }
    },
  }
</script>

Я получаю слайдер. К сожалению, я не могу сдвинуть его и сразу же запустить maxValue. Как на этой картинке, введите описание изображения здесь и вот она. Неважно, где я нажимаю, он ничего не делает. Когда я хотел бы изменить параметры, такие как change dotSize, он также ничего не делает.

Я заметил, что когда я открываю консоль (F12), он работает отлично.

Ползунок защелкнут в панели загрузочного устройства 3.

Что мне не хватает?

ОБНОВЛЕНИЕ 1:

я вытащил значение вне параметров теперь, я получаю это:

введите описание изображения здесь

javascript,vuejs2,vue-slider-component,

0

Ответов: 1

0

Вы должны поместить опции непосредственно в <vue-slider>свойствах. Он может быть динамическим, если вы добавляете их в объект данных.

<template>
  <div>
    <vue-slider 
      :value='value'
      width='auto'
      :height='6'
      direction='horizontal'
      :dotSize="16"
      eventType='auto'
      :min='5'
      :max='100'
      :interval='5'
      :show='true'
    />
  </div>
</template>

<script>
import vueSlider from 'vue-slider-component'    

export default {
  data: () => ({
    value: 5
  }),
  components: {
    vueSlider
  }
}
</script>
JavaScript, vuejs2, Вьет-слайдер-компонент,
Похожие вопросы
Яндекс.Метрика