Vuejs наблюдает за объектом, а затем выполняет метод сбой

Я хочу посмотреть опору, которая является объектом, поэтому у меня есть

<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");
        }
    }
}

The above watcher works as the console.log displays the new value but i cannot execute a method as on the watch am getting an error Error in callback for watcher "filter": "TypeError: _this.fetchData is not a function". How can i execute a method on a deep watcher.


javascript vue.js vuejs2 watch
person Geoff    schedule 16.03.2019    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Переместите стрелку в простую функцию для handler method. Измените handler:(newval)=> { на handler: function (newval) {:

Документы Vue.js:

Не используйте стрелочные функции в свойстве options или обратном вызове, например created: () => console.log (this.a) или vm. $ Watch ('a', newValue => this.myMethod ()).

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

person Sajib Khan    schedule 16.03.2019
comment
@GEOFFREYMWANGI stackoverflow.com/questions/34361379/ddg#34361380 Функции стрелок имеют другую область видимости, чем «функция» ключевое слово, поэтому ваш this не то, что вы ожидаете от функции стрелки. Это объяснение того, почему Vue запрещает использовать стрелочные функции. - person Nate; 16.03.2019