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

47次阅读

共计 409 个字符，预计需要花费 2 分钟才能阅读完成。

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,
    },
  },

正文完