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>

<script>

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)

})

},

}

}

</script>

<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

版權聲明：本文為博主原創文章，轉載請附上博文鏈接！

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！