javascript - 如何在 Vue watch 中使用模型？

Question

我有一个简单的 Vue 组件，如下所示:

export default {
    data: function () {
        return {
            brands: [],
            models: [
                {id:1, name: 'one'},
                {id:2, name: 'two'},
                {id:3, name: 'tree'}
            ],

            filters: {},

            filter: {
                brand: null,
                model: null,
                price: null,
                year: null
            }
        }
    },
    watch: {
        'filter.brand': (brand) => {
            console.log('filter.brand', this, this.models)

            socket.emit('brands.models.get', brand, (models) => {
                console.log(models)

                console.log(this.models)

                this.models = models;

                console.log(this.models)
            })
        },
    }
}

主要问题是，当我从套接字接收数据时，我看不到模型。

例如 console.log(this.models) 返回未定义。

这里是完整打印的样子:

Answer 1

你应该尝试使用观察者的正常功能:

 'filter.brand': function(){}

因为箭头函数:[ (brand) => {} ] 没有自己的“this”，我猜这是导致问题的原因。

PS:为了正常工作，您的代码应该是这样的:

   'filter.brand': function(brand){
        //Access to the vue instance
        var me = this;

        socket.emit('brands.models.get', brand, (models) => {
            me.models = models;
        })
    },