类星体框架：无法识别观察者内部的方法

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: Watchers

解决方案： 使用 @docnoe

建议的 shorthand 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 = "";
    }
  }
});

Codepen

类星体框架：无法识别观察者内部的方法

Quasar Framework: Method inside watcher is not recognized

cordova

vue.js

quasar-framework