如何更改组件的位置以使其与绑定到的 v 模型相同？

Question

我有两个滑块。当下滑块的值大于0时，上滑块必须为5。我使用观察者来实现这一点。但如果我改变顶部滑块的位置；"啪"的一声；返回到5位置。值仍然是5，只是在视觉上没有移动。我该如何让它回到它应该处于的位置？

https://jsfiddle.net/omz36csL/29/

HTML

<div id="app">
<v-app>
<v-card class="pa-5 ma-2">
<v-row v-for="(dummy, index) in dummyData" :key="index">
<v-slider v-model="dummyData[index]" :min="0" :max="5" type="numbers" single-line hide-details>
</v-slider>
<v-chip>{{dummyData[index]}}</v-chip>
</v-row>
</v-card>
</v-app>
</div>

JS-

Vue.use(Vuetify);
var vm = new Vue({
el: "#app",
data: {
dummyData: [1, 0]
},
watch: {
dummyData(val) {
if (val[1] > 0) {
this.dummyData[0] = 5
}
}
}
});

Answer 1

通常，对计算属性进行Waching是一个更好的主意。

Vue.use(Vuetify);
var vm = new Vue({
el: "#app",
data: {
dummyData: [1, 0]
},
methods: {
doThis() {
if (this.dummy > 0) {
this.dummyData[0] = 5
} 
}
},
watch: {
dummy: "doThis"
},
computed: {
dummy () {
return this.dummyData[1];
}
}
});

编辑：

<v-slider
v-model="dummyData[index]"
:min="0" :max="5" type="numbers" single-line hide-details 
:class="{'no-pointer-events': index === 0 && dummyData[index + 1] > 0}">
</v-slider>
.no-pointer-events {pointer-events: none}