Vuejs 观察一个对象然后执行一个方法失败

Question

我想看一个道具，它是一个物体，所以我有

<script>
export default {
    watch:{
        filter: {
            handler:(newval)=> {
               console.log("i have new data",newval) //this works
               this.fetchData(); //throws an error
            },
            deep: true
        }
    },
    props:{
        filter:{
            type:Object,
            required:true
        }
    },
    data: () => ({
        pagination: {},
        items: []
    }),
    methods:{
        fetchData(){
            console.log("am fetching the data");
        }
    }
}

上面的观察器在 console.log 显示新值时工作，但我无法执行方法，因为在手表上我收到错误观察器 "filter" 的回调错误："TypeError: _this.fetchData is not a function" .我如何在深度观察者上执行一个方法。

Answer 1

将 Arrow 函数移至 handler method 的简单函数。将 handler:(newval)=> { 更改为 handler: function (newval) {:

Vue.js docs:

Don’t use arrow functions on an options property or callback, such as created: () => console.log(this.a) or vm.$watch('a', newValue => this.myMethod()).

handler: function (newval) {
  console.log("i have new data",newval) //this works
  this.fetchData(); // it should work
},

Vuejs 观察一个对象然后执行一个方法失败

Vuejs watching an object then execute a method fails

javascript

vue.js

vuejs2

watch