Vue如何循环提取对象数组中的值

 更新时间:2020年11月18日 10:31:30   投稿:yaominghui  
这篇文章主要介绍了Vue如何循环提取对象数组中的值,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下

1.数据如下,提取name和callcount

2代码.

getQueryCallStatistics("sesp1", this.provinceId).then((res) => {
    let arr = [];
    let arr1 = [];
    let arr2 = [];
    let arr3 = [];
    let arr4 = [];
    this.xunshiMap = res.data.callstatistics;
    res.data.callstatistics.forEach((element) => {
     // arr.push([
     //  element.name,
     //  element.callcount.patrol,
     //  element.callcount.repair,
     //  element.callcount.defect
     // ]);
     arr.push([element.name, 27, 38, 27]);
     arr1.push(element.name);

     arr2.push({ value: element.callcount.defect, name: element.name,type: element.name });
     arr3.push({ value: element.callcount.patrol, name: element.name,type: element.name });
     arr4.push({ value: element.callcount.repair, name: element.name,type: element.name });
     // arr2.push({ value: 27, name: element.name });
     // arr3.push({ value: 27, name: element.name });
     // arr4.push({ value: 38, name: element.name });
    });
    this.xunshiMap = arr;
    this.xunshiPer = arr1;
    this.xunshiPer1 = arr2;
    this.qxArr = arr4;
    this.xqArr = arr2;
    this.xsArr = arr3;
    setTimeout(this.renderEachCity, 0);
    this.echartCity();
   });

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

相关文章

  • Vue3.x项目开发的一些常用知识点总结

    Vue3.x项目开发的一些常用知识点总结

    目前Vue3.0是会兼容大部分2.x的语法,下面这篇文章主要给大家介绍了关于Vue3.x项目开发的一些常用知识点,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-05-05
  • 利用vue-router实现二级菜单内容转换

    利用vue-router实现二级菜单内容转换

    这篇文章主要介绍了如何利用vue-router实现二级菜单内容转换,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-11-11
  • 客户端(vue框架)与服务器(koa框架)通信及服务器跨域配置详解

    客户端(vue框架)与服务器(koa框架)通信及服务器跨域配置详解

    本篇文章主要介绍了客户端(vue框架)与服务器(koa框架)通信及服务器跨域配置详解,具有一定的参考价值,有兴趣的可以了解一下
    2017-08-08
  • 在Vue中实现深度监听的示例代码

    在Vue中实现深度监听的示例代码

    在 Vue 中,深度监听是指监听一个对象或数组的嵌套属性(深层结构)的变化,而不仅仅是监听顶层属性的引用变化,本文给大家介绍了如何在Vue中实现深度监听,并通过代码示例介绍的非常详细,需要的朋友可以参考下
    2025-03-03
  • 如何换个角度使用VUE过滤器详解

    如何换个角度使用VUE过滤器详解

    这篇文章主要给大家介绍了如何换个角度使用VUE过滤器的相关资料,文中通过示例代码介绍的非常详细,对大家学习或者使用VUE具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
    2019-09-09
  • vue混入mixin流程与优缺点详解

    vue混入mixin流程与优缺点详解

    混入(mixin)提供了一种非常灵活的方式,来分发vue组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时,所有混入对象的选项将被“混合”进入该组件本身的选项
    2022-09-09
  • Vue实现动态路由的示例详解

    Vue实现动态路由的示例详解

    这篇文章主要为大家详细介绍了Vue实现动态路由的相关知识,主要涉及到两个方面:一是路由的动态添加,二是基于路由的参数变化来动态渲染组件,下面就跟随小编一起深入学习一下动态路由的实现吧
    2024-02-02
  • vue form 表单提交后刷新页面的方法

    vue form 表单提交后刷新页面的方法

    今天小编就为大家分享一篇vue form 表单提交后刷新页面的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09
  • vant实现购物车功能

    vant实现购物车功能

    这篇文章主要为大家详细介绍了vant实现购物车功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-06-06
  • vue实现多个echarts根据屏幕大小变化而变化实例

    vue实现多个echarts根据屏幕大小变化而变化实例

    这篇文章主要介绍了vue实现多个echarts根据屏幕大小变化而变化实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-07-07

最新评论