vue.js - 更改范围滑块VueJS后如何更新值
问题描述
我想在拖动滑块后更新值。
这是我的代码
<div id="app">
<vue-range-slider v-model="rangeSlider" v-bind="options"></vue-range-slider>
<p class="mt-50">Value: {{ value }}</p>
</div>
let app = new Vue({
el: '#app',
data() {
return {
value: 0,
rangeSlider: 0,
options: {
eventType: 'auto',
width: 'auto',
height: 5,
dotSize: 16,
min: 0,
max: 50,
interval: 1,
show: true,
speed: 1,
tooltipDir: 'bottom',
}
}
},
computed: {
rangeChange () {
let range = this.rangeSlider;
if (range > 0 && range <= 20) {
return this.value = 4;
}
if (range > 20 && range <= 30) {
return this.value = 5;
}
if (range > 30 && range <= 40) {
return this.value = 6;
}
if (range > 40 && range <= 50) {
return this.value = 7;
}
}
}
})
我rangeChange()
在计算中创建以更改value
,但在拖动滑块后,value
未更新。你可以在这里看到更多:https ://codepen.io/LinhNT/pen/KKpNeva
我使用这个范围滑块 vue:https ://github.com/xwpongithub/vue-range-slider
我该如何解决?
解决方案
FirstrangeChange
不在任何地方使用,因此永远不会计算该值。
其次,您不应该修改computed
值中的状态,您可以使用watcher来做到这一点。
更新代码:
Vue.config.devtools = false;
Vue.config.productionTip = false;
let app = new Vue({
el: "#app",
data() {
return {
value: 0,
rangeSlider: 0,
options: {
eventType: "auto",
width: "auto",
height: 5,
dotSize: 16,
min: 0,
max: 50,
interval: 1,
show: true,
speed: 1,
tooltipDir: "bottom",
tooltipStyle: {
backgroundColor: "#2AB6CB",
borderColor: "#2AB6CB"
},
processStyle: {
backgroundColor: "#2AB6CB"
}
}
};
},
watch: {
rangeSlider(range) {
if (range > 0 && range <= 20) {
this.value = 4;
}
if (range > 20 && range <= 30) {
this.value = 5;
}
if (range > 30 && range <= 40) {
this.value = 6;
}
if (range > 40 && range <= 50) {
this.value = 7;
}
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<link href="https://unpkg.com/vue-range-component@1.0.3/dist/vue-range-slider.min.css" rel="stylesheet"/>
<script src="https://unpkg.com/vue-range-component@1.0.3/dist/vue-range-slider.min.js"></script>
<div id="app">
<vue-range-slider v-model="rangeSlider" v-bind="options"></vue-range-slider>
<p class="mt-50">Value: {{ value }}</p>
</div>
推荐阅读
- assembly - 像a2f这样的分支目标是什么
在objdump反汇编中是什么意思? - azure - AKS - 将插件 HTTP 应用程序路由与 nginx 重写规则相结合?
- javascript - React,子组件映射问题
- excel - 遍历列并检查当前行中的值是否与前一行中的值不同
- python - Python节拍间隔跟踪
- css - 如何在 bootstrap 4 中使打开的手风琴标题变粘?
- phpmailer - phpMailer 在 Outlook 中设置破坏 HTML 模板
- c# - 在 ASP.net 中创建 PDF 或“打印报告”
- excel - 是否有可以更改复制单元格内容的 vba 代码?
- database - 使用内存 SQLite 进行并发读取的最佳方法?