Vue项目获取后端传递的json数据并在前端给json数组添加自定义数据 |
您所在的位置：网站首页 › vue给数组添加数据 › Vue项目获取后端传递的json数据并在前端给json数组添加自定义数据 |
|
版权声明：欢迎转载，注明作者和出处就好！如果不喜欢或文章存在明显的谬误，请留言说明原因再踩哦，谢谢，我也可以知道原因，不断进步！https://blog.csdn.net/csonst1017/article/details/85710904 因为项目前后端分离，前端需要获取后端传过来的json数据，并显示到页面上，但因为页面的内容是在data()函数里动态生成，有些内容是后端的json没有的，所以在把json数组的数据添加进data()函数里的数组的时候动态的添加一些数据。 1.首先获取后端的json数据： var jsonObj = JSON.parse(JSON.stringify(successResponse.data.data));successResponse是服务器响应内容，其中包含json数据。这里涉及到一个json格式转化问题，因为响应内容successResponse是个对象，所以我们需要先用stringify函数把json转成字符串形式。但因为后面要获取json里面指定的key对应的value，并且自定义添加一些数据，所以我们还需要用parse函数转成Json对象形式（也叫json序列化）。有的朋友就会问了，为什么不直接使用successResponse.data.data？还要转来转去？因为原本不是json对象。是HttpServletResponse对象。 2.遍历json数组对象，添加自定义数据 for (var i = 0; i { item.menuName }} {{ subItem.menuName }} {{ threeItem.menuName }} {{ subItem.menuName }} {{ item.menuName }} 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)); console.log("增加内容前："+JSON.stringify(jsonObj)); for (var i = 0; i }).catch(error => { console.log(error.response.data.code) }) }, } } .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%; } |
今日新闻 |
推荐新闻 |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |