Question

我正在使用vueSlider

我不确定如何在computed:one() function中实现滑块？使用滑块上获取的数据？非常感谢为此提供的所有示例...

我在数据中给出了值。但是在计算中如何将获取的数据用于过滤器。

data() {
        return {
            estates: [],
            keyword: '',
            regions:[],
            sortType:'',
            rooms:[],
            slider:{value: [0, 4000],width: '100%',height: 8,dotSize: 16,min: 0, max: 5000,disabled: false,show: true,
              useKeyboard: true,
              tooltip: 'always',
              formatter: '¥{value}',
              enableCross: false,
              mergeFormatter: '¥{value1} ~ ¥{value2}'}
        }
    },
    created(){
        axios.get('/ajax').then((response) => {
            this.estates = response.data;
        });
    },
    computed: {
        one: function () {
            let filteredStates = this.estates.filter((estate) => {
                return (this.keyword.length === 0 || estate.includes(this.keyword)) &&
                (this.rooms.length === 0 || this.rooms.includes(estate.rooms)) &&
                (this.regions.length === 0 || this.regions.includes(estate.region))});

                if(this.sortType == 'price') {
                    filteredStates = filteredStates.sort((prev, curr) => prev.price - curr.price);
                }
                if(this.sortType == 'created_at') {
                    filteredStates = filteredStates.sort((prev, curr) => Date.parse(prev.created_at) - Date.parse(curr.created_at));
                }

                return filteredStates;
        }
    }

<div class="slider">
    <vue-slider ref="slider3" v-bind="slider" v-model="slider.value"></vue-slider>
</div>

Answer 1

我认为您必须将value: [0, 4000]更改为value: 0。 min和max是您设置滑块边界的地方。

然后在计算机中执行：

filteredStates = filteredStates.filter((estate) => { return estate.price <= this.slider.value});

最终代码应如下所示：

data() {
        return {
            estates: [],
            keyword: '',
            regions:[],
            sortType:'',
            rooms:[],
            slider:{value: 0,width: '100%',height: 8,dotSize: 16,min: 0, max: 5000,disabled: false,show: true,
              useKeyboard: true,
              tooltip: 'always',
              formatter: '¥{value}',
              enableCross: false,
              mergeFormatter: '¥{value1} ~ ¥{value2}'}
        }
    },
    created(){
        axios.get('/ajax').then((response) => {
            this.estates = response.data;
        });
    },
    computed: {
        one: function () {
            let filteredStates = this.estates.filter((estate) => {
                return (this.keyword.length === 0 || estate.includes(this.keyword)) &&
                (this.rooms.length === 0 || this.rooms.includes(estate.rooms)) &&
                (this.regions.length === 0 || this.regions.includes(estate.region))});

                if(this.sortType == 'price') {
                    filteredStates = filteredStates.sort((prev, curr) => prev.price - curr.price);
                }
                if(this.sortType == 'created_at') {
                    filteredStates = filteredStates.sort((prev, curr) => Date.parse(prev.created_at) - Date.parse(curr.created_at));
                }

                filteredStates = filteredStates.filter((estate) => { return estate.price <= this.slider.value});

                return filteredStates;
        }
    }

尝试一下，让我知道它是否有效。干杯

Vue中的价格范围滑块

1 个答案: