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

比较函数中的this与hostelsList函数中的this不相等。

他们有不同的范围。因此，您可以选择：

使用箭头功能替换为您的比较功能，例如

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

使用bind制作另一个具有正确作用域的函数，例如

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

Answer 2

您可以考虑将compare移至methods键，如下所示：

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

然后这样称呼它：

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

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

这将为this内的compare提供正确的范围。

在比较功能中设置sort_by

2 个答案: