vue接收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
最后贴上组件的完整代码：
text-color="#bfcbd9" active-text-color="#20a0ff" unique-opened router>
{{ uName }}
{{ uName }}
{{ uName }}
{{ uName }}
{{ uName }}
<>
import bus from '../common/bus';
export default {
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',
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: '拖拽列表',
},
vuejson转对象
{
index: 'dialog',
},
{
icon: 'el-icon-lx-warn',
index: '7',
menuName: '错误处理',
subs: [{
index: 'permission',
menuName: '权限测试'
},
{
index: '404',
menuName: '404页⾯'
}
]
}
]
}
},
computed: {
onRoutes() {
return this.$place('/', '');
}
},
created() {
// 通过 Event Bus 进⾏组件间通信，来折叠侧边栏bus.$on('collapse', msg => {
});
},
methods: {
.get('/api/admin/system/menu/list')
.
then(successResponse => {
//获取json中的data部分
if (de === 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.de)
})
},
}
}
>
.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) {

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。