如何在 Laravel 5.6 中使用 vue-slider-component答案

【问题标题】：How to use vue-slider-component in Laravel 5.6如何在 Laravel 5.6 中使用 vue-slider-component
【发布时间】：2024-01-11 10:04:01
【问题描述】：

我想在我的面板中添加一个滑块。我已经安装了

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>

并导入 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。就像在这张照片中就是这样。我在哪里点击都没关系，它什么也不做。当我想更改诸如更改 dotSize 之类的选项时，它什么也不做。

我注意到当我打开控制台(F12) 时它运行良好。

滑块被包裹在 bootstrap 3 面板中。

我错过了什么？

更新 1：

我在选项之外提取了值，现在我得到了这个：

【问题讨论】：

官方直播demo有value外options对象。所以我认为你应该这样做或使用v-model="options.value"
我更新了我的问题。现在该值在选项之外
好吧，不是这个。但是您的滑块的作用类似于fiddle linked in this exception 中的第一个滑块

标签： javascript vuejs2 vue-slider-component

【解决方案1】：

您应该将选项直接放在<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>

【讨论】：