Установить sort_by в функцию сравнения

Question

В приложении Vuejs 2.6 я использую функцию сравнения для другой сортировки по sort_by:

export default {
    data: function () {
        return {
            ...
            sort_by: null,
        }

    },

    computed: {
        ...
        hostelsList: function() {
            if ( this.sort_by == null || typeof this.sort_by == "undefined" ) {
                this.sort_by= 'price' 
            }
            console.log("this.sort_by::")
            console.log( this.sort_by )


            function compare(a, b) {
                if ( this.sort_by == 'price' ) {
                    if (a.price < b.price)
                        return -1;
                    if (a.price > b.price)
                        return 1;
                } // if ( this.sort_by == 'price' ) {

                if ( this.sort_by == 'rating' ) {
                    if (a.rating < b.rating)
                        return -1;
                    if (a.rating > b.rating)
                        return 1;
                } // if ( this.sort_by == 'rating' ) {

                if ( this.sort_by == 'name' ) {
                    if (a.name < b.name)
                        return -1;
                    if (a.name > b.name)
                        return 1;
                } // if ( this.sort_by == 'name' ) {

                return 0;
            }

            return this.$store.getters.hostels.sort(compare);
        },  // hostelsList: function() {

Но я получил это ошибка :

app.js?dt=1556086426:98302 [Vue warn]: Error in render: "TypeError: Cannot read property 'sort_by' of undefined"

Модифицированный блок: строки:

 console.log("this.sort_by::")
 console.log( this.sort_by )


 console.log("this::")
 console.log( this )

возвращает действительное значение для sort_by, и я не уверен, что должно быть в этом:

Полагаю, причина в том, что sort_by недоступен в функции сравнения, но я не уверен, как передать это значение?

Спасибо!

Answer 1

Вы можете рассмотреть возможность перемещения compare на клавишу methods следующим образом:

// ...
methods: {
  compare (a, b) {
    // ...
  }
}

Тогда назовите это так:

computed: {
  hotelsList: function() {
    // ...

    return this.$store.getters.hostels.sort(this.compare);
  }
}

Это даст правильную область видимости для this внутри compare.

Answer 2

this в вашей функции сравнения не было равно this в вашей функции hostelsList.

У них были разные области действия.Таким образом, вы можете либо :

1. использовать функцию стрелки, заменить на вашу функцию сравнения, такую ​​как

const compare = (a,b) =>{/*...*/}

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

this.$store.getters.hostels.sort(compare.bind(this))