问答

vue 子组件watch监听死循环问题如何解决

作者:admin 2021-08-16 我要评论

vue watch监听死循环问题,子组件报错[Vue warn]: You may have an infinite update loop in watcher with expression "configure" //父组件data(){ ratio_chart...

在说正事之前,我要推荐一个福利:你还在原价购买阿里云、腾讯云、华为云服务器吗?那太亏啦!来这里,新购、升级、续费都打折,能够为您省60%的钱呢!2核4G企业级云服务器低至69元/年,点击进去看看吧>>>)

vue watch监听死循环问题,子组件报错[Vue warn]: You may have an infinite update loop in watcher with expression "configure"

//父组件
data(){
    ratio_chart: {
        yAxisData: [],
        curSeriesData: [],
        lastSeriesData: []
    },
},
methods:{
    getData(){
        this.$axios.post('xxx',params).then(res => {
            let result = res.data
            result.map((item) => {
            this.ratio_chart.curSeriesData.push(item.total)
            this.ratio_chart.lastSeriesData.push(item.lastTotal)
            this.ratio_chart.yAxisData.push(item.quesCateName)
        })
        })
    }
}

将ratio_chart传值给子组件configure
<child :configure='ratio_chart'></child>

//child.vue
props: {
    configure: {
      type: Object,
      default () {
        return {}
      }
    },
},
watch: {
    configure: {
      handler (newVal, oldVal) {
        if (newVal) {
          this.drawChart()
        }
      },
      deep: true
    }
  }

image.png
image.png
控制台子组件报错[Vue warn]: You may have an infinite update loop in watcher with expression "configure"

麻烦问下大家如何解决这个死循环的问题?谢谢

###
光看现在的代码,感觉是 drawChart 里也修改了 configure 导致的,你粘上来看看,
另外,建议优化一下 getData 函数,等批量处理后再更新
methods:{
     getData(){
        this.$axios.post('xxx',params).then(res => {
            let obj = {
                yAxisData: [],
                curSeriesData: [],
                lastSeriesData: []
            };
            res.data.forEach((item) => {
                obj.curSeriesData.push(item.total)
                obj.lastSeriesData.push(item.lastTotal)
                obj.yAxisData.push(item.quesCateName)
            });
            this.ratio_chart = obj;
        })
    }
}

版权声明:本文转载自网络,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。本站转载出于传播更多优秀技术知识之目的,如有侵权请联系QQ/微信:153890879删除

相关文章
  • vue 子组件watch监听死循环问题如何解

    vue 子组件watch监听死循环问题如何解

  • php中,如果把类的属性和方法全部定义

    php中,如果把类的属性和方法全部定义

  • element table 多级表头动态遍历渲染

    element table 多级表头动态遍历渲染

  • react 为什么会触发兄弟组件的render更

    react 为什么会触发兄弟组件的render更

腾讯云代理商
海外云服务器