{{ item.menuName }} <…" /> {{ item.menuName }} <…"/>
>汽车>>正文

Vue项目获取后端传递json数据并在前端给json数组添加自定义数据

原标题:Vue项目获取后端传递json数据并在前端给json数组添加自定义数据

因为项目前后端分离,前端需要获取后端传过来的json数据,并显示到页面上,但因为页面的内容是在data()函数里动态生成,有些内容是后端的json没有的,所以在把json数组的数据添加进data()函数里的数组的时候动态的添加一些数据。

1.首先获取后端的json数据:

var jsonObj = JSON.parse(JSON.stringify(successResponse.data.data));

1

successResponse是服务器响应内容,其中包含json数据。这里涉及到一个json格式转化问题,因为响应内容successResponse是个对象,所以我们需要先用stringify函数把json转成字符串形式。但因为后面要获取json里面指定的key对应的value,并且自定义添加一些数据,所以我们还需要用parse函数转成Json对象形式(也叫json序列化)。有的朋友就会问了,为什么不直接使用successResponse.data.data?还要转来转去?因为原本不是json对象。是HttpServletResponse对象。

2.遍历json数组对象,添加自定义数据

for (var i = 0; i < jsonObj.length; i++) {

jsonObj[i].index='table'

}

1

2

3

给json数组对象的每个位置添加自定义内容index:‘table’。

这里数组对象里原来是没有index这个key的,但是会自己添加进去。

3.将改造后的json数组对象传给data()里声明的数组。

this.items[1].subs=jsonObj;

1

最后贴上组件的完整代码:

<template>

<div class="sidebar">

<el-menu class="sidebar-el-menu" :default-active="onRoutes" :collapse="collapse" background-color="#324157"

text-color="#bfcbd9" active-text-color="#20a0ff" unique-opened router>

<!-- <el-button @click="getMenu()">lianjie</el-button> -->

<template v-for="item in items">

<template v-if="item.subs">

<el-submenu :index="item.index" :key="item.index">

<template slot="title">

<i :class="item.icon"></i><span slot="title">{{ item.menuName }}</span>

</template>

<template v-for="subItem in item.subs">

<el-submenu v-if="subItem.subs" :index="subItem.index" :key="subItem.index">

<template slot="title">{{ subItem.menuName }}</template>

<el-menu-item v-for="(threeItem,i) in subItem.subs" :key="i" :index="threeItem.index">

{{ threeItem.menuName }}

</el-menu-item>

</el-submenu>

<el-menu-item v-else :index="subItem.index" :key="subItem.index">

{{ subItem.menuName }}

</el-menu-item>

</template>

</el-submenu>

</template>

<template v-else>

<el-menu-item :index="item.index" :key="item.index">

<i :class="item.icon"></i><span slot="title">{{ item.menuName }}</span>

</el-menu-item>

</template>

</template>

</el-menu>

</div>

</template>

<>

import bus from '../common/bus';

export default {

data() {

return {

responseResultData: [],

// menuName: '',

collapse: false,

items: [{

icon: 'el-icon-lx-home',

index: 'dashboard',

menuName: '系统首页'

},

{

icon: 'el-icon-lx-cascades',

index: '1',

menuName: '基础表格',

subs: []

},

{

icon: 'el-icon-lx-copy',

index: 'tabs',

menuName: 'tab选项卡'

},

{

icon: 'el-icon-lx-calendar',

index: '3',

menuName: '表单相关',

subs: [{

index: 'form',

menuName: '基本表单'

},

{

index: '3-2',

menuName: '三级菜单',

subs: [{

index: 'editor',

menuName: '富文本编辑器'

},

{

index: 'markdown',

menuName: 'markdown编辑器'

},

]

},

{

index: 'upload',

menuName: '文件上传'

}

]

},

{

icon: 'el-icon-lx-emoji',

index: 'icon',

menuName: '自定义图标'

},

{

icon: 'el-icon-lx-favor',

index: 'charts',

menuName: 'schart图表'

},

{

icon: 'el-icon-rank',

index: '6',

menuName: '拖拽组件',

subs: [{

index: 'drag',

menuName: '拖拽列表',

},

{

index: 'dialog',

menuName: '拖拽弹框',

}

]

},

{

icon: 'el-icon-lx-warn',

index: '7',

menuName: '错误处理',

subs: [{

index: 'permission',

menuName: '权限测试'

},

{

index: '404',

menuName: '404页面'

}

]

}

]

}

},

computed: {

onRoutes() {

return this.$route.path.replace('/', '');

}

},

created() {

// 通过 Event Bus 进行组件间通信,来折叠侧边栏

bus.$on('collapse', msg => {

this.collapse = msg;

});

this.getMenu();

},

methods: {

getMenu() {

this.$axios

.get('/api/admin/system/menu/list')

.then(successResponse => {

//获取json中的data部分

if (successResponse.data.code === 200) {

var jsonObj = JSON.parse(JSON.stringify(successResponse.data.data));

var newArray= new Array()

for (var i = 0; i < jsonObj.length; i++) {

jsonObj[i].index='table'

}

this.items[1].subs=jsonObj;

console.log(this.items[1].subs);

}

})

.catch(failResponse => {}).catch(error => {

console.log(error.response.data.code)

})

},

}

}

</>

<style scoped>

.sidebar {

display: block;

position: absolute;

left: 0;

top: 70px;

bottom: 0;

overflow-y: scroll;

}

.sidebar::-webkit-scrollbar {

width: 0;

}

.sidebar-el-menu:not(.el-menu--collapse) {

width: 250px;

}

.sidebar>ul {

height: 100%;

}

</style>

---------------------

作者:古今

原文:https://blog.csdn.net/csonst1017/article/details/85710904

版权声明:本文为博主原创文章,转载请附上博文链接!

返回搜狐,查看更多

责任编辑:

声明:该文观点仅代表作者本人,搜狐号系信息发布平台,搜狐仅提供信息存储空间服务。
阅读 ()
投诉
免费获取
今日搜狐热点
今日推荐