在 vue 中.js我如何按尺寸、颜色、类别过滤产品，并通过在逐步滑块中选择这些类别中的每一个来过滤产品

Question

在vue中.js如何按尺寸，颜色，类别过滤产品，并通过在逐步滑块中选择每个类别，我必须逐个逐步选择每个过滤器，最后我需要显示通过过滤器的产品。

Answer 1

请分享代码示例并询问有关您卡在哪里的具体问题。这个问题非常广泛，很难回答。

我会尽力提供答案。

您可能有一个如下所示的ProductList组件：

<template>
<!-- your template -->
</template>
<script>
import RangeSlider from "./RangeSlider";
export default {
name: "ProductList",
components: {
RangeSlider
},
data() {
return {
products: [],
filters: {
color: null,
size: null,
category: null
},
options: {
color: ["Red", "Yellow", "Green"],
size: ["Small", "Medium", "Large"],
category: ["Men", "Women", "Boy", "Girl"]
}
};
}
};
</script>

RangeSlider可以使用本机<input type="range" />控件来生成所需的功能。

在此示例中，它需要一个label和一个options数组来生成控件，当用户通过滑动更改控件的值时，将发出一个change事件，该事件在ProductList中捕获以设置筛选器。然后，您可以使用filters对象并进行 API 调用来获取您的产品。

<template>
<div class="range-slider">
<label>
<strong>{{ label }}</strong>
</label>
<div>
<input type="range" min="0" :max="max" step="1" @change="onInputChange" :value="rangeValue">
</div>
<div>{{ options[rangeValue] }}</div>
</div>
</template>
<script>
export default {
name: "RangeSlider",
props: ["label", "options"],
data() {
return {
rangeValue: 0
};
},
mounted() {
this.onChange(0);
},
methods: {
onInputChange(e) {
this.onChange(e.target.value);
},
onChange(rangeValue) {
this.rangeValue = rangeValue;
let selectedOption = this.options[this.rangeValue];
this.$emit("change", selectedOption);
}
},
computed: {
max() {
return this.options.length - 1;
}
}
};
</script>
<style>
.range-slider {
padding: 1rem;
border-bottom: 1px solid;
}
</style>

---

以下是CodeSandbox上的工作示例：https://codesandbox.io/s/rangesliderwithoptionsexample-6pe10