javascript - 如何在 Laravel 5.6 中使用 vue-slider-component
问题描述
我想在我的面板中添加一个滑块。我已安装
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:
我将值拉到选项之外,现在我得到了:
解决方案
您应该将选项直接放在<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>
推荐阅读
- firebase - 函数/区域配置值在 Firebase 云函数中实际上做了什么?
- terraform - 向地形变量添加约束
- javascript - UnhandledPromiseRejectionWarning: SyntaxError: 无效的正则表达式: /\?(?
.*)/: 无效组 - hive - 数据插入问题
- r - R - 用其他列数据填充一列
- haskell - 在haskell中保证类型的值
- firebase - 如何将事务与 int 数据一起使用 - Firestore Flutter
- rest - GET 方法永远不会与基于安全 OAuth/OpenClient 的应用程序一起使用吗?
- r - 如何读取 .rdata 文件并从中写入 .csv 文件
- bash - sh:意外标记“<”附近的语法错误