关于vue.js:Vue项目watch中为什么取不到this

1.问题重现:先来看下这段代码

  watch: {
    posInfo: {
      handler: val => {
        if (val) {
          this.$nextTick(() => {
            this.subform.lgtd = val.lgtd;
            this.subform.lttd = val.lttd;
          });
        }
      },
      deep: true,
    },
  },

运行后果:Error “$nextTick” ……..
输入一下this,发现是undefined

2.解决方案
箭头函数绑定了父级作用域的上下文,从而不会拿到Vue实例。所以在应用watch设置监听的时候,handler函数不应该应用箭头函数。

  watch: {
    posInfo: {
      handler: function (val) {
        if (val) {
          this.$nextTick(() => {
            this.subform.lgtd = val.lgtd;
            this.subform.lttd = val.lttd;
          });
        }
      },
      deep: true,
    },
  },

评论

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

这个站点使用 Akismet 来减少垃圾评论。了解你的评论数据如何被处理