如何从手表调用功能？

Question

data: function ()  {
    return {
       questions: []
    }
},

watch: {
    questions : function(val, oldVal) {
        foo()
    }
},      

methods: {
    foo() {
        console.log("foo called");
    }
}

产生错误：ReferenceError: foo is not defined

我也在看例子：http://vuejs-ru.github.io/vuejs.org/api/options.html#watch

这个字符串是做什么的？

handler: function (val, oldVal) { /* ... */ }, handler 是关键字？或者它可以是功能？

Answer 1

如果你想用 watch 观察你的属性，你可以用 this.foo:

调用你的方法

data: function ()  {
    return {
       questions: []
    }
},
    
watch: {
   questions: {
       handler: function(val, oldVal) {
           this.foo(); // call it in the context of your component object
       },
       deep: true
    }
},      
    
methods: {
    foo() {
        console.log("foo called");
    }
}

回答关于 handler 的问题：关键字属性可以采用函数表达式（如示例中所示）或对函数的引用，例如：

function myHandler() { ... } // Defined somewhere outside of the vue component object
    
...
    
handler: myHandler,
    
...

出于好奇：您是否需要观看属性以便在每次更改时都做某事，或者 computed properties 也可以解决您的问题？

Answer 2

只是为了添加@nils

的回答

handler: 'foo'

如果 foo 函数在方法中也有效。

比

短了一点

handler() {
    this.foo()
}

如何从手表调用功能？

How to call function from watch?

vue.js