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)返回undefined。

这里有完整的印刷品：

Answer 1

你应该尝试使用普通函数作为观察者：

 'filter.brand': function(){}

因为箭头功能：[（品牌）=＆gt; {} ]没有自己的“这个”，我猜这是造成问题的原因。

PS：为了正常工作，这就是你的代码应该是什么样的：

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

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

Answer 2

您还可以使用Method Definitions，如Vue created()和mounted()方法所示，参考Vue.Js Examples - created，

从ECMAScript 2015开始，引入了对象初始值设定项上方法定义的更短语法。

  created() {
    this.filter.brand = 'f'
  },
  watch: {
    'filter.brand'(brand) {
      console.log('filter.brand', this, this.models)
    },
  }

示例，CodePen

如何在Vue手表中使用型号？

2 个答案: