cordova - Quasar Framework：观察者内部的方法无法识别

Question

我正在尝试在 Quasar-Framework 应用程序中使用观察者，并且观察者内部的方法未被识别为方法。

 data () {
   return {
     education: { degree:'test' },
     type: 2
   }
 },
 watch: {
   type: (newType) => {
     if (newType === 1) {
       this.removeDegree()
     }
   }
 },
 methods: {
   removeDegree () {
     this.education.degree = ''
   }
 }

我希望调用 removeDegree，但是会抛出警告和错误，这表明 removeDegree 不是函数。

参考：VueJS：观察者

解决方案： 使用@docnoe 建议的简写 es6 语法

watch: {
  type (newType) {
    if (newType === 1) {
      this.removeDegree()
    }
  }
},
...

Answer 1

@Belmin Bedak 已经在他的评论中回答了这个问题：“type”上的手表使用的箭头功能打破了对“this”的引用。请改用普通功能。

固定代码：

new Vue({
  el: "#app",
  data() {
    return {
      education: { degree: "test" },
      type: 2,
      type2: 2,
      type3: 3
    };
  },
  watch: {
    // shorthand es6 syntax
    type(newType) {
      if (newType === 1) {
        this.removeDegree();
      }
    },
    // this is also valid
    type2: function(newType) {
      if (newType === 1) {
        this.removeDegree();
      }
    },
    // or using a handler
    type3: {
      handler(newType) {
        if (newType === 1) {
          this.removeDegree();
        }
      },
      // other watch options
      immediate: true
    }
  },
  methods: {
    removeDegree() {
      this.education.degree = "";
    }
  }
});

密码笔