Vue-slider具有正确的数据，但将两个滑块工具提示放在滑块的末尾

Question

我正在使用"组件根据价格对产品进行排序。我面临的问题是，即使数据正确加载并发送到"vue滑块"。实现。滑块上的工具提示(可拖动的点)同时出现在滑块的末尾。我想有第一个工具提示在滑块的开始和第二个在结束。getMin和getMax是通过字符串插值{{getMin}}和{{getMax}}读取的，它们都显示了正确的值，1和800(美元)。这让我想知道为什么这两个工具提示仍然在滑块的末尾。

我使用以下代码在前端显示滑块数据:

<price-slider
code="price"
id="reloadDiv"
:priceRange="[
{ from: minPrice },
{ to: maxPrice   },
]"
@change="$emitPriceSlider($event)"
/>
</div>

这个滑块背后的逻辑是基于组件的。我使用的代码如下:

<template>
<div class="price-slider-container">

{{ getMin }} {{ getMax }}
<no-ssr placeholder="loading..." placeholader-tag="span">
<vue-slider
ref="priceSlider"
v-model="value"
v-bind="priceSliderOptions"
:clickable="false"
:min="getMin"
:max="getMax"
:tooltip-formatter="tooltipContent"
@drag-end="setPrice"
/>
</no-ssr>
</div>
</template>
<script>
import NoSSR from "vue-no-ssr";
import isEqual from "lodash-es/isEqual";
import { products } from "config";
const PriceSliderComponents = {};
if (process.browser) {
let VueSlider = require("vue-slider-component");
PriceSliderComponents["vue-slider"] = VueSlider;
}
PriceSliderComponents["no-ssr"] = NoSSR;
export default {
name: "PriceSlider",
props: {
content: {
type: null,
default: "",
},
id: {
type: null,
required: true,
},
code: {
type: null,
required: true,
},
priceRange: {
type: Array,
required: true,
},
context: {
type: null,
default: "",
},
},
beforeMount() {
this.$bus.$on("reset-filters", this.resetPriceSlider);
this.$bus.$on("reset-price-slider", this.resetPriceSlider);
},
beforeDestroy() {
this.$bus.$off("reset-filters", this.resetPriceSlider);
this.$bus.$off("reset-price-slider", this.resetPriceSlider);
},
mounted() {
const routeQueryData =
this.$store.state.route[products.routerFiltersSource];
if (routeQueryData.hasOwnProperty("price")) {
const routePriceRange = routeQueryData["price"].split("-");
if (!isEqual(this.value, routePriceRange)) {
this.value = routePriceRange;
}
}
},
data() {
return {
active: false,
remove: false,
value: this.priceRange,
currencySign: this.$store.state.config.i18n.currencySign,
priceSliderOptions: {
clickable: false,
height: 2,
"bg-style": {
backgroundColor: "#f2f2f2",
},
"tooltip-dir": ["bottom", "bottom"],
formatter: "€ {value}",
"process-style": {
backgroundColor: "#4dba87",
fontWeight: 700,
},
"tooltip-style": {
backgroundColor: "#4dba87",
color: "#ffffff",
"border-color": "#4dba87",
padding: "7px 10px",
},
},
};
},
computed: {
// priceSliderOptions() {
//   return {
//     ...this.priceSliderConfig,
//     ...this.tooltipContent,
//     silent: true,
//   };
// },
tooltipContent() {
return { formatter: this.currencySign + " {value}" };
},
getMin() {
return String(this.priceRange[0].from);
},
getMax() {
return String(this.priceRange[1].to);
},
},
watch: {
$route: "validateRoute",
},
methods: {
setPrice: function (e) {
let val = e.val;
let from = parseInt(val[0]);
let to = parseInt(val[1]);
let id = from.toFixed(1) + "-" + to.toFixed(1);
this.remove = isEqual([from, to], this.priceRange);
this.switchFilter({
id: id,
type: this.code,
from: from,
to: to,
remove: this.remove,
});
},
switchFilter(variant) {
this.$emit("change", variant);
},
resetPriceSlider() {
if (this.$refs.priceSlider) {
this.$refs.priceSlider.setValue(this.priceRange);
}
},
validateRoute() {
const routeQueryData =
this.$store.state.route[products.routerFiltersSource];
if (this.$refs.priceSlider && !routeQueryData.hasOwnProperty("price")) {
this.$nextTick(() => {
this.$refs.priceSlider.setValue(this.priceRange);
});
}
},
},
components: PriceSliderComponents,
};
</script>
<style lang="scss" scoped>
@import "~src/themes/default/css/variables/colors";
@import "~src/themes/default/css/helpers/functions/color";
$color-event: color(tertiary);
$color-active: color(accent);
.price-slider-container {
padding-bottom: 50px;
position: relative;
z-index: 1;
}
.price-selector {
width: 20px;
height: 20px;
&.active {
.square {
background-color: $color-active;
}
}
}
.square {
width: 80%;
height: 80%;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
</style>
<style lang="scss">
.vue-slider-component .vue-slider-dot {
box-shadow: none;
}
</style>

Answer 1

我已经找到了解决这个问题的方法，如下行:

data() {
return {
active: false,
remove: false,
value: this.priceRange,

如果value被设置为数组，则不支持此操作。我通过将this.priceRange替换为:

来修补此问题。

[this.priceRange[0].from, this.priceRange[1].to],