New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Vue warn]: Error in callback for watcher "endVal": "TypeError: this.demo.update is not a function" #764

Open
DeyiXu opened this Issue Jul 8, 2018 · 1 comment

Comments

Projects
None yet
1 participant
@DeyiXu

DeyiXu commented Jul 8, 2018

求助 求助

created: function() {
    let that = this;
    util.ajax
      .get("/users?count=true")
      .then(data => {
          that.count.createUser = 100;
      })
      .catch(function(e) {
        that.$Message.error(e.error);
      });
    //that.count.createUser = 100;
  },

注释掉的代码没问题,then回调函数中调用 出现以下问题

vue.esm.js:578 [Vue warn]: Error in callback for watcher "endVal": "TypeError: this.demo.update is not a function"

found in

---> <CountUp> at src/views/home/components/countUp.vue
       <Row>
         <ICol>
           <Card>
             <InforCard> at src/views/home/components/inforCard.vue
               <ICol>
                 <Row>
                   <ICol>
                     <Row>
                       <Home> at src/views/home/home.vue
                         <Main> at src/views/Main.vue
                           <App> at src/app.vue
                             <Root>
warn @ vue.esm.js:578
logError @ vue.esm.js:1713
globalHandleError @ vue.esm.js:1708
handleError @ vue.esm.js:1697
run @ vue.esm.js:3208
flushSchedulerQueue @ vue.esm.js:2954
(anonymous) @ vue.esm.js:1813
flushCallbacks @ vue.esm.js:1734
Promise.then (async)
microTimerFunc @ vue.esm.js:1782
nextTick @ vue.esm.js:1826
queueWatcher @ vue.esm.js:3041
update @ vue.esm.js:3182
notify @ vue.esm.js:684
reactiveSetter @ vue.esm.js:1009
(anonymous) @ home.vue:239
Promise.then (async)
created @ home.vue:238
callHook @ vue.esm.js:2895
Vue._init @ vue.esm.js:4560
Override.Vue._init @ vue-i18n.common.js:110
VueComponent @ vue.esm.js:4728
createComponentInstanceForVnode @ vue.esm.js:4242
init @ vue.esm.js:4059
createComponent @ vue.esm.js:5512
createElm @ vue.esm.js:5460
patch @ vue.esm.js:5995
Vue._update @ vue.esm.js:2637
updateComponent @ vue.esm.js:2765
get @ vue.esm.js:3115
Watcher @ vue.esm.js:3104
mountComponent @ vue.esm.js:2772
1.Vue$3.$mount @ vue.esm.js:8429
1.Vue$3.$mount @ vue.esm.js:10790
init @ vue.esm.js:4065
createComponent @ vue.esm.js:5512
createElm @ vue.esm.js:5460
createChildren @ vue.esm.js:5586
createElm @ vue.esm.js:5488
createChildren @ vue.esm.js:5586
createElm @ vue.esm.js:5488
createChildren @ vue.esm.js:5586
createElm @ vue.esm.js:5488
patch @ vue.esm.js:5995
Vue._update @ vue.esm.js:2637
updateComponent @ vue.esm.js:2765
get @ vue.esm.js:3115
Watcher @ vue.esm.js:3104
mountComponent @ vue.esm.js:2772
1.Vue$3.$mount @ vue.esm.js:8429
1.Vue$3.$mount @ vue.esm.js:10790
init @ vue.esm.js:4065
createComponent @ vue.esm.js:5512
createElm @ vue.esm.js:5460
updateChildren @ vue.esm.js:5749
patchVnode @ vue.esm.js:5840
patch @ vue.esm.js:6000
Vue._update @ vue.esm.js:2647
updateComponent @ vue.esm.js:2765
get @ vue.esm.js:3115
run @ vue.esm.js:3192
flushSchedulerQueue @ vue.esm.js:2954
(anonymous) @ vue.esm.js:1813
flushCallbacks @ vue.esm.js:1734
Promise.then (async)
microTimerFunc @ vue.esm.js:1782
nextTick @ vue.esm.js:1826
queueWatcher @ vue.esm.js:3041
update @ vue.esm.js:3182
notify @ vue.esm.js:684
reactiveSetter @ vue.esm.js:1009
(anonymous) @ vue-router.esm.js:2508
(anonymous) @ vue-router.esm.js:2507
updateRoute @ vue-router.esm.js:1997
(anonymous) @ vue-router.esm.js:1875
(anonymous) @ vue-router.esm.js:1984
step @ vue-router.esm.js:1714
step @ vue-router.esm.js:1721
step @ vue-router.esm.js:1721
runQueue @ vue-router.esm.js:1725
(anonymous) @ vue-router.esm.js:1979
step @ vue-router.esm.js:1714
(anonymous) @ vue-router.esm.js:1718
(anonymous) @ vue-router.esm.js:1964
(anonymous) @ vue-router.esm.js:1757
(anonymous) @ vue-router.esm.js:1833
Promise.then (async)
(anonymous) @ vue-router.esm.js:1780
(anonymous) @ vue-router.esm.js:1801
(anonymous) @ vue-router.esm.js:1801
flatMapComponents @ vue-router.esm.js:1800
(anonymous) @ vue-router.esm.js:1736
iterator @ vue-router.esm.js:1943
step @ vue-router.esm.js:1717
step @ vue-router.esm.js:1721
step @ vue-router.esm.js:1721
(anonymous) @ vue-router.esm.js:1718
(anonymous) @ vue-router.esm.js:1964
util.toDefaultPage @ util.js:279
(anonymous) @ index.js:50
iterator @ vue-router.esm.js:1943
step @ vue-router.esm.js:1717
runQueue @ vue-router.esm.js:1725
confirmTransition @ vue-router.esm.js:1972
transitionTo @ vue-router.esm.js:1874
init @ vue-router.esm.js:2499
beforeCreate @ vue-router.esm.js:540
callHook @ vue.esm.js:2895
Vue._init @ vue.esm.js:4556
Override.Vue._init @ vue-i18n.common.js:110
Vue$3 @ vue.esm.js:4659
(anonymous) @ main.js:20
__webpack_require__ @ bootstrap ce8f4417b4184f50c576:712
fn @ bootstrap ce8f4417b4184f50c576:117
(anonymous) @ index.js:1
__webpack_require__ @ bootstrap ce8f4417b4184f50c576:712
webpackJsonpCallback @ bootstrap ce8f4417b4184f50c576:25
(anonymous) @ main.js:1
vue.esm.js:1717 TypeError: this.demo.update is not a function
    at VueComponent.endVal (countUp.vue:103)
    at Watcher.run (vue.esm.js:3206)
    at flushSchedulerQueue (vue.esm.js:2954)
    at Array.<anonymous> (vue.esm.js:1813)
    at flushCallbacks (vue.esm.js:1734)
@DeyiXu

This comment has been minimized.

DeyiXu commented Jul 8, 2018

我修改了 countUp.vue

watch: {
    endVal(val) {
      let res = transformValue(val);
      let endVal = res.val;
      this.unit = res.unit;
      // 原先代码
      // this.demo.update(endVal);
      // 修改后的
      this.$nextTick(() => {
        setTimeout(() => {
          this.demo.update(endVal);
        }, this.delay);
      });
    }
  }

大概原因就是,watch函数在调用 this.demo.update(endVal);的时候对象为空,mounted 函数中做了延时创建对象导致空指针。

this.demo.update(endVal);

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment