Question

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

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

我希望调用removeDegree，但是，警告＆amp;抛出错误，表示removeDegree不是函数。

参考：VueJS: Watchers

解：使用@docnoe

建议的简写es6语法

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

Answer 1

@Belmin Bedak已在评论中回答：手表上使用的箭头功能“类型”打破了对“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

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

1 个答案: