search

iview / iview-admin

Vue 2.0 admin management system template based on iView
https://admin.iviewui.com/
MIT License
16.49k stars 4.84k forks source link

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

Open DeyiXu opened 6 years ago

DeyiXu commented 6 years ago

求助 求助

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 commented 6 years ago

我修改了 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 函数中做了延时创建对象导致空指针。

https://github.com/iview/iview-admin/blob/cfe93bb7c2d3cd826bc8010ee5e221bdffca95ec/src/views/home/components/countUp.vue#L104

Dyrixu commented 5 years ago

遇到了相同的问题，完美解决