Слайдер ценового диапазона в Vue

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;
        }
    }

Попробуйте и дайте мне знать, если это работает.Приветствия