初始化后显示 [object Object] 的价格滑块

Question

我正在 Vue 中开发价格滑块，通过 API 调用返回所有产品数据。在其中一个对象中，返回所有项目的最低价和最高价之间的范围。

我的 .Vue class 中滑块实现的代码是：

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

每当我拖动第一个滑块选项时，[object Object] 会立即设置到末尾，包括正确的价格。然后单击第一个滑块选项，也会设置正确的（第一个和最低的）价格。

我似乎无法找到为什么 price-slider 选项没有设置到正确的位置和值，而是只是显示 [object, Object] 在彼此之上，想知道是否有人可以启发我。我还尝试将 forceUpdate() 添加到元素中，但似乎无法使其正常工作。

滑块组件本身的代码如下：

<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

我认为您应该尝试从 get in 方法

在 return 中添加一个 toString

初始化后显示 [object Object] 的价格滑块

Price slider showing [object Object] after initialisation

javascript

initialization

object

slider

vue.js