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

Question

我正在使用“vue-slider”组件根据价格对产品进行排序。我面临的问题是，尽管数据已正确加载并发送到“vue-slider”实现。滑块上的工具提示（可拖动的点）出现在滑块的末端。我想在滑块的开头有第一个工具提示，在结尾有第二个工具提示。 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,

不支持将值设置为数组。我通过将 this.priceRange 替换为：

来修补此问题

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

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

Vue-slider has correct data but places both slider-tooltips at the end of the slider

javascript

vue.js

vue-component

vuejs2

vue-slider-component