Javascript 如何在Laravel 5.6中使用vue滑块组件

我想在我的面板上添加一个滑块。我已经进去了

npm install vue-slider-component --save

然后我创建了一个新组件，并在

app.js

在Slider.vue组件中，我添加了startet模板

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

值：{{options.Value}}

并导入了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>

从“vue滑块组件”导入vueSlider
导出默认值{
组成部分：{
vueSlider
},
数据（）{
返回{
选项：{
数值：5，
宽度：“自动”，
身高：6，
方向：'水平'，
大小：16，
eventType:'自动'，
民:5,，
最高：100，
间隔时间：5，
秀：没错，
}
}
},
}

我正在滑球。不幸的是，我无法滑动它并在开始时立即获得最大值。就像这张照片一样 就这样。无论我在哪里点击它都不起作用。当我想更改选项时，比如更改dotSize，它也不会做任何事情

我注意到，当我打开控制台（F12）时，它工作正常

滑块在bootstrap 3面板中拧动

我错过了什么

更新1：

我将值拉到选项之外，现在我得到：

---

您应该将选项作为属性直接放在

中。如果将它们添加到数据对象中，则可以是动态的

<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>

从“vue滑块组件”导入vueSlider
导出默认值{
数据：（）=>({
价值：5
}),
组成部分：{
vueSlider
}
}

Official live具有

值

外部

选项

对象。因此，我认为您也应该这样做，或者使用

v-model=“options.value”

我更新了我的问题。现在该值超出了选项OK，不是这个。但您的滑块的动作与中的第一个类似