Как отсортировать цену и дату по Vue в Laravel

Question

Пытается отсортировать по цене и дате .код ниже.Я не использовал контроллер для этого.можно ли здесь это сделать?

это "вид" работы.проблема в том, что когда я выбираю цену, она не сортируется.но когда я выбираю дату, это сортировка, а не цена даты ????после этого, когда я выбираю цену еще раз, она сортирует дату ?????И дата сортируется по asc, как я могу изменить ее на desc :) Я обновляю код, пожалуйста, проверьте это?Спасибо за помощь.

Код обновлен 2:

data() {
        return {
            estates: [],
            keyword: '',
            regions:[],
            rooms:[],
            sortType:''

        }
    },
    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') {
                    this.estates = this.estates.sort((prev, curr) => prev.price - curr.price);
            }
            if(this.sortType == 'created_at') {
                this.estates = this.estates.sort((prev, curr) => Date.parse(prev.created_at) - Date.parse(curr.created_at));
            }

            return filteredStates;
        }
    }
    }

<select v-model="sortType" v-on:change="one">
        <option value="">Sort Type</option>
        <option value="price">price</option>
        <option value="created_at">Date</option>
</select>

Спасибо за помощь.

Answer 1

Вот пример использования вычисляемой сортировки в Vue: https://jsfiddle.net/jxuLdhz3/

sortedItems() {
  if (this.sortBy === 'by-date') {
    return this.items.sort((prev, curr) => {
        return new Date(prev.date) - new Date(curr.date);
    });
  }
  if (this.sortBy === 'by-price') {
    return this.items.sort((prev, curr) => {
        return prev.price - curr.price;
    });
  }
  return this.items;
},

Ссылка на сортировку: https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/Array/sort

---

UPD-01: если вам нужно отсортироватьпо нескольким полям я рекомендую использовать lodash.js

https://lodash.com/docs/4.17.11#orderBy

http://jsfiddle.net/cuq0vmy5

_.orderBy(this.items, ['price', 'date'], ['asc', 'asc']);

Answer 2

Я думаю, что самый простой способ сделать это - сохранить результат первой сортировки в переменной filteredStates, а затем использовать ту же переменную для повторной фильтрации в соответствии с сортировкой по дате.

Пример кода:

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.sortBy == 'created_at') {
                filteredStates = filteredStates.sort((prev, curr) => Date.parse(prev.created_at) - Date.parse(curr.created_at));
            }

            return filteredStates;
    }
}

Я уверен, что есть более быстрый способ достижения того же результата, но таким способом легче понять, что происходит в коде.

Позвольте мнезнать, работает ли это;)

ОБНОВЛЕНИЕ:

Проблема в том, что вы используете this.estates вместо переменной filteredStates, в которой хранятся отфильтрованные результаты.Вы должны продолжать использовать filteredStates во всех последующих фильтрах.Пожалуйста, посмотрите пример:

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

Answer 3

Вы можете использовать функцию sort для массива.

Например:

const filtered = [
  {price: 20, date: '12-12-2020'},
  {price: 15, date: '23-12-2019'},
  {price: 23, date: '12-12-2028'},
].sort((prev, curr) => prev.price - curr.price);

console.log(filtered)

Вы можете передать свой массив в мой массив и вернуть отфильтрованный массив.

prev - предыдущий объект, curr - текущий объект.

Что такое sort?

Это функция, обеспечивающая функцию обратного вызова для сортировки массива.

Я отсортировал по цене, которую вы можете попробовать price и date

Для вас код:

    <select v-model="sortType" v-on:change="sortItem()">
        <option value="">Sort Type</option>
        <option value="price">Price</option>
        <option value="created_at">Date</option>
    </select>
    <ul>
        <li v-for="item of estates">Price: {{item.price}}, Date: {{item.created_at}}</li>
    </ul>

Сценарий:

        data: () => {
            return {
                sortType: '',
                estates: []
            }
        },
        mounted() {
            this.estates = [{
                    price: 20,
                    created_at: '2019-01-28 09:31:42'
                },
                {
                    price: 15,
                    created_at: '2019-01-28 09:31:42'
                },
                {
                    price: 23,
                    created_at: '2019-01-28 09:30:42'
                },
            ];
        },
        methods: {
            sortItem() {
                if (this.sortType == 'price') {
                    this.estates = this.estates.sort((prev, curr) => prev.price - curr.price);
                }
                if (this.sortType == 'created_at') {
                    this.estates = this.estates.sort((prev, curr) => Date.parse(prev.created_at) - Date.parse(curr.created_at));
                }
            }
        }