Vue-slider数据正确但两个滑块tooltip均显示在末端问题求助

• 核心问题是vue-slider范围滑块的v-model绑定值格式不符合组件要求：范围滑块需要绑定[最小值, 最大值]的一维数值数组，而当前代码绑定的value初始化值是[{from: minPrice}, {to: maxPrice}]的对象数组，组件无法识别导致两个滑块都默认定位到最大值位置
• 次要问题是min/max属性传入了字符串类型的边界值，部分版本的vue-slider对字符串类型的数值边界识别异常，也会导致滑块定位错误
• 重置滑块时调用setValue传入的参数也是对象数组，会触发同样的定位错误

1. 修正value初始化格式 #

修改data配置中value的初始赋值：

data() {
  return {
    // 其他配置保持不变
    // 原来的 value: this.priceRange 替换为下方代码
    value: [this.priceRange[0].from, this.priceRange[1].to],
    // 其他配置保持不变
  }
}

2. 修正边界值类型 #

修改computed中getMin、getMax的返回值为数值类型：

computed: {
  // 其他计算属性保持不变
  getMin() {
    return this.priceRange[0].from;
  },
  getMax() {
    return this.priceRange[1].to;
  },
}

3. 修正重置滑块的传参 #

修改resetPriceSlider、validateRoute方法中setValue的入参：

resetPriceSlider() {
  if (this.$refs.priceSlider) {
    this.$refs.priceSlider.setValue([this.priceRange[0].from, this.priceRange[1].to]);
  }
},
validateRoute() {
  const routeQueryData =
    this.$store.state.route[products.routerFiltersSource];
  if (this.$refs.priceSlider && !routeQueryData.hasOwnProperty("price")) {
    this.$nextTick(() => {
      this.$refs.priceSlider.setValue([this.priceRange[0].from, this.priceRange[1].to]);
    });
  }
},

4. 可选优化：路由取值转数值 #

如果路由参数的价格是字符串格式，建议转成数值避免类型不匹配：

mounted() {
  const routeQueryData =
    this.$store.state.route[products.routerFiltersSource];
  if (routeQueryData.hasOwnProperty("price")) {
    const routePriceRange = routeQueryData["price"].split("-").map(Number);
    if (!isEqual(this.value, routePriceRange)) {
      this.value = routePriceRange;
    }
  }
},

内容的提问来源于stack exchange，提问作者Craws