vue框架下menu導航條高亮出現問題

CSDN問答 2022-01-08 02:28:32 阅读数:946

vue 框架 架下 menu 高亮

由圖可見,導航條的提問並沒有高亮,必須要再點擊一次才能高亮,求解,望不吝賜教。

<template> <a-layout id="components-layout-demo-top" class="layout" style="min-height: 100%;width:100%"> <div id="header"> <div class="logo">知&nbsp;否</div> <div id="title"> <router-link :to="{name:'mainPage',params:{'id':this.id,'img':this.img,'token':this.token}}" style="color:white"> <a-icon type="home" />&nbsp;首頁 </router-link> </div> <div id="title1"> <router-link :to="{name:'personSpace',params:{'id':this.id,'img':this.img,'token':this.token}}" style="color:white"> <a-icon type="user" />&nbsp;個人中心 </router-link> </div> <a-input-search placeholder="請輸入要搜索的問題" v-model="searchItem" style="width: 300px;margin: 15px 20px 10px 90px;" @search="onSearch"/> <button type="button" id="search" @click="onSearch" style=" height: 15px; width: 120px; margin: 10px; padding: 18px; border-radius: 10px; line-height: 0px; font-family: 'Source Sans Pro', sans-serif; font-size: 20px; position: absolute; background: deepskyblue; font-weight: bold; color: white; border-color: skyblue; /*transform: translateY(4px);*/"> 搜索問題 </button> <div style="height:60px;weight:200px;float:right;padding: 0 20px;"> <div id="right" style="padding: 10px 5px 20px 20px;"> <a-badge :count=count title="通知" v-if=ifToken style="margin-left: 40px"> <a-icon type="bell" style="font-size: 25px" title="通知" @click="getMessage"/> </a-badge> <router-link :to="{name:'personSpace',params:{'id':this.id,'img':this.img,'token':this.token}}"> <a-avatar shape="square" v-if=ifToken size="large" :src=img style="margin-left: 20px;margin-bottom: 12px"/> </router-link> </div> <template> <a-dropdown> <a style="color:white;font-size: 20px;" > {
{ u_name }} <a-icon type="down" style="color:white;font-size:25px" /> </a> <a-menu slot="overlay" @click="onClick"> <a-menu-item key="1"> <a-icon type="setting" /> 設置 </a-menu-item> <a-menu-item key="2" @click="logout"> <a-icon type="logout" /> 退出 </a-menu-item> </a-menu> </a-dropdown> </template> </div> </div> <a-layout-content style="padding: 0 50px"> <a-breadcrumb style="margin: 20px 0"> </a-breadcrumb> <div :style="{ background: '#fff', padding: '24px', minHeight: '430px' }"> <img :src=img width="50" height="50"> <h3 style="font-weight: bold;display: inline;margin-left: 20px;"> {
{username}} </h3> <router-link :to="{name:'changeInformation',params:{'id':this.id,'img':this.img,'token':this.token}}"> <a-button style="float: right;width: 120px;">編輯個人資料</a-button> </router-link> <br/><br/> <a-menu v-model="current" mode="horizontal"> <a-menu-item key="answer" @click="answer" style="width: 330px; text-align: center;font-weight: bold"> 回答</a-menu-item> <!-- <a-menu-item key="star" style="width: 330px; text-align: center;font-weight: bold"> 收藏</a-menu-item>--> <a-menu-item key="question" style="width: 330px; text-align: center;font-weight: bold"> 提問</a-menu-item> </a-menu> <!--依次類推的話,以傳來的列錶list中的question_id為key,依次顯示各個問題,具體如下--> <div v-for="item in list" :key="item.question_id"> <br/><br/> <a style="font-weight: bold;font-size: 20px;color: black" @click="seeThisQuestion(item)">{
{item.question_title}}</a><!--問題標題--> <p>{
{item.question_content}}</p><!--問題內容--> <p style="font-size: 10px">{
{item.updated_time}}</p> <a-button @click="changeQuestion(item)" type="primary" style="float:right;width:90px;padding: 0 10px;" v-if="item.question_authority_state === 0">修改問題</a-button> <a-button @click="endQuestion(item)" style="float:right;width:90px;padding: 0 10px;" type="primary" v-if="item.question_authority_state === 0">終結問題</a-button> <p v-if=item.question_authority_state style="float:right;width:90px;padding: 0 10px;" type="primary" >問題已終結</p> <a-button @click="deleteQuestion(item)" v-if="item.question_authority_state === 0" style="float:right;width:90px;padding: 0 10px;" type="danger">删除問題</a-button> <a-divider/> </div> <!--end 顯示問題列錶的部分--> </div> </a-layout-content> </a-layout></template><script>export default { name:"personalQuestion", inject:['reload'], data(){ return{ current: ['mail'], username:'',//昵稱 list: [], id:this.$route.params.id,//從登陸界面進行傳值 img:this.$route.params.img, token:this.$route.params.token, searchItem:'', count:'', u_name:'', ifToken: localStorage.getItem('access_token'), } }, mounted() { var _this = this; _this.$axios.post('/api/user/selectByUserId', _this.$qs.stringify({ uId:_this.id, }), {headers:{access_token:_this.token}} ).then(function (response) { console.log("主頁獲取登錄用戶信息:"); console.log(response.data); console.log(response.data.data.u_img); console.log(response.data.data.u_name); _this.img = response.data.data.u_img; _this.u_name=response.data.data.u_name; }).catch(function (error) { console.log(error); //_this.$message.error('請求失敗'); }) _this.$axios.post('/api/quest/showQuestByUserId', _this.$qs.stringify({ userId:_this.id, }),{headers: {access_token: _this.token}} ).then(function (response) { console.log(response.data); _this.list = response.data.data; }).catch(function (error) { console.log(error); _this.$message.error('請求失敗'); })//end getAskedQuestions函數,獲取該用戶的提問 _this.$axios.post('/api/msg/showMsgNum', _this.$qs.stringify({ userId: _this.$route.params.id,//router傳值!!! }),{headers:{access_token:_this.token}} ).then(function (response) { console.log(response.data.data); _this.count = response.data.data; //_this.list = response.data.data; }).catch(function (error) { console.log(error); _this.$message.error('獲取消息失敗'); }) }, methods:{ logout(){ var _this = this; _this.$axios.post('/api/user/leave', _this.$qs.stringify({ uId: this.id, }),{headers: {access_token:_this.token}} ).then(function (response) { console.log(response.data); localStorage.removeItem('access_token'); localStorage.clear(); _this.$router.push({ path:'/login', name:'login', }) }).catch(function (error) { console.log(error); _this.$message.error('請求失敗'); }) },//end exit函數/* onClick ({ key }) { console.log(`Click on item ${key}`) }, onSearch(){ var _this = this; _this.$axios.post('/api/quest/selectByTitle', _this.$qs.stringify({ questionTitle:_this.searchItem, }),{ headers: { access_token: _this.token } } ).then(function (response) { console.log(response.data.data); _this.$router.push({ path:'/searchPage', name:'searchPage',//路由命名 params:{ list:response.data.data, id:_this.id, img:_this.img, token:_this.token }, });//end 頁面跳轉 }).catch(function (error) { console.log(error); _this.$message.error('請求失敗'); }) },//end onSearch函數,進行查找問題 getMessage(){ var _this = this; _this.$router.push({ path:'/messagePage', name:'messagePage', params:{ id:_this.id, img:_this.img, token:_this.token, } }) },//end getMessage函數,獲取消息 edit(){ var _this = this; _this.$router.push({ path:'/changeInfomation', name:'changeInfomation', params:{ id:_this.id, img:_this.userImg, token:_this.token, } }) },//end edit函數,編輯個人信息 answer(){ var _this = this; _this.$router.push({ path:'/personSpace', name:'personSpace', params:{ id:_this.id, img:_this.img, token:_this.token, } }) }, seeThisQuestion(record){ var _this = this; console.log(record);//打印問題詳細信息 _this.$router.push({ path:'/detailpage', name:'DatailPage',//路由命名 params:{ question_id:record.question_id,//頁面之間的傳值 id:_this.id, img:_this.img, token:_this.token, question_state:record.question_authority_state, question_title:record.question_title, question_content:record.question_title, }, }); },//end seeThisQuestion函數,查看這個問題的詳細信息 endQuestion(record){ var _this = this; _this.$axios.post('/api/quest/alterQuestState', _this.$qs.stringify({ questionId:record.question_id, questionAuthorityState:1, }),{headers: {access_token: _this.token}} ).then(function (response) { console.log(response.data); _this.$message.success('問題已終結'); }).catch(function (error) { console.log(error); _this.$message.error('請求失敗'); }) _this.reload() }, changeQuestion(record){ var _this = this; _this.$router.push({ path:'/changeQuestion', name:'changeQuestion', params:{ question_id:record.question_id, id:_this.id, img:_this.img, token:_this.token, question_content:record.question_content, } }) },//end deleteQuestion(record){ var _this = this; _this.$axios.post('/api/quest/deleteQuest', _this.$qs.stringify({ questionId:record.question_id, isDeleted:1, }),{headers: {access_token:_this.token}} ).then(function (response) { console.log(response.data); _this.$message.success('删除成功'); // _this.list = response.data.data; }).catch(function (error) { console.log(error); _this.$message.error('删除失敗'); }) _this.reload() }, exit(){ var _this = this; _this.$axios.post('/api/user/leave', _this.$qs.stringify({ uId: this.id, }),{headers: {access_token:_this.token}} ).then(function (response) { console.log(response.data); localStorage.removeItem('access_token'); localStorage.clear(); _this.$router.push({ path:'/login', name:'login', }) }).catch(function (error) { console.log(error); _this.$message.error('請求失敗'); }) },//end exit函數 }}</script><style></style>

這是提問界面vue框架代碼

<template> <a-layout id="components-layout-demo-top" class="layout"> <div id="header"> <div class="logo">知&nbsp;否</div> <div id="title"> <router-link :to="{name:'mainPage',params:{'id':this.id,'img':this.img,'token':this.token}}" style="color:white"> <a-icon type="home" />&nbsp;首頁 </router-link> </div> <div id="title1"> <router-link :to="{name:'personSpace',params:{'id':this.id,'img':this.img,'token':this.token}}" style="color:white"> <a-icon type="user" />&nbsp;個人中心 </router-link> </div> <a-input-search placeholder="請輸入要搜索的問題" v-model="searchItem" style="width: 300px;margin: 15px 20px 10px 90px;" @search="onSearch"/> <button type="button" id="search" @click="onSearch" style=" height: 15px; width: 120px; margin: 10px; padding: 18px; border-radius: 10px; line-height: 0px; font-family: 'Source Sans Pro', sans-serif; font-size: 20px; position: absolute; background: deepskyblue; font-weight: bold; color: white; border-color: skyblue; /*transform: translateY(4px);*/"> 搜索問題 </button> <div style="height:60px;weight:200px;float:right;padding: 0 20px;"> <div id="right" style="padding: 10px 5px 20px 20px;"> <a-badge :count=count title="通知" v-if=ifToken style="margin-left: 40px"> <a-icon type="bell" style="font-size: 25px" title="通知" @click="getMessage"/> </a-badge> <router-link :to="{name:'personSpace',params:{'id':this.id,'img':this.img,'token':this.token}}"> <a-avatar shape="square" v-if=ifToken size="large" :src=img style="margin-left: 20px;margin-bottom: 12px"/> </router-link> </div> <template> <a-dropdown> <a style="color:white;font-size: 20px;" > {
{ u_name }} <a-icon type="down" style="color:white;font-size:25px" /> </a> <a-menu slot="overlay" @click="onClick"> <a-menu-item key="1"> <a-icon type="setting" /> 設置 </a-menu-item> <a-menu-item key="2" @click="logout"> <a-icon type="logout" /> 退出 </a-menu-item> </a-menu> </a-dropdown> </template> </div> </div> <a-layout-content style="padding: 0 50px"> <a-breadcrumb style="margin: 20px 0"> </a-breadcrumb> <div :style="{ background: '#fff', padding: '24px', minHeight: '430px' }"> <img :src=img width="50" height="50"> <h3 style="font-weight: bold;display: inline;margin-left: 20px;"> {
{username}} </h3><!-- <a-button style="margin-left: 50px" @click="exit" type="danger"> 退出登錄 </a-button>--> <router-link :to="{name:'changeInformation',params:{'id':this.id,'img':this.img,'token':this.token}}"> <a-button style="float: right;width: 120px;">編輯個人資料</a-button> </router-link> <br/><br/> <a-menu mode="horizontal"> <a-menu-item key="answer" style="width: 330px; text-align: center;font-weight: bold"> 回答</a-menu-item><!-- <a-menu-item key="star" style="width: 330px; text-align: center;font-weight: bold"> 收藏</a-menu-item>--> <a-menu-item key="question" @click="question" style="width: 330px; text-align: center;font-weight: bold"> 提問</a-menu-item> </a-menu> <!--依次類推的話,以傳來的列錶list中的question_id為key,依次顯示各個問題,具體如下--> <div v-for="(item, index) in list" :key="`${item.question_id}_${index}`"> <div style="float:right;background: red;font-size: 18px;padding:5px;color:white" v-if="item.question_authority_state === 1">已終結</div> <div style="float:right;background: deepskyblue;font-size: 18px;padding:5px;color:white" v-if="item.question_authority_state === 0">未終結</div> <a style="font-weight: bold;font-size: 20px;color: black;margin: 130px 0px;" @click="seeThisQuestion(item)">{
{item.question_title}}</a><!--問題標題--> <p>{
{item.answer_content}}</p><!--回答內容--> <p style="font-size: 10px">{
{item.updated_time}}</p> <a-button @click="changeAnswer(item)" style="float:left;width:90px;padding: 0 10px;" type="primary" v-if="item.question_authority_state === 0">修改回答</a-button> <a-button @click="deleteAnswer(item)" style="float:left;width:90px;padding: 0 10px;" type="danger" v-if="item.question_authority_state === 0">删除回答</a-button> <a-divider/> </div> <!--end 顯示問題列錶的部分--> </div> </a-layout-content> </a-layout></template><script>export default { name:"personSpace", inject:['reload'], data(){ return{ current: ['mail'], username:'',//昵稱 id:this.$route.params.id,//從登陸界面進行傳值 img:this.$route.params.img, token:this.$route.params.token, list: [], searchItem:'', count:'', ifToken: localStorage.getItem('access_token'), u_name:'' } }, mounted() { var _this = this; _this.$axios.post('/api/user/selectByUserId', _this.$qs.stringify({ uId:_this.id, }), {headers:{access_token:_this.token}} ).then(function (response) { console.log("主頁獲取登錄用戶信息:"); console.log(response.data); console.log(response.data.data.u_img); console.log(response.data.data.u_name); _this.img = response.data.data.u_img; _this.u_name=response.data.data.u_name; }).catch(function (error) { console.log(error); //_this.$message.error('請求失敗'); }) _this.$axios.post('/api/answer/showAnswerByUserId', _this.$qs.stringify( { userId: _this.$route.params.id, // userId: 2, }),{ headers: { access_token: _this.token } } ).then(function (response) { console.log("showAnswerByUserId:") console.log(response.data.data); _this.list = response.data.data; }).catch(function (error) { console.log(error); _this.$message.error('對不起,請求失敗'); })//end get函數,獲取某一個用戶的所有回答 _this.$axios.post('/api/msg/showMsgNum', _this.$qs.stringify({ userId: _this.$route.params.id,//router傳值!!! }),{headers:{access_token:_this.token}} ).then(function (response) { console.log(response.data.data); _this.count = response.data.data; //_this.list = response.data.data; }).catch(function (error) { console.log(error); _this.$message.error('獲取消息失敗'); }) }, methods:{ onClick ({ key }) { console.log(`Click on item ${key}`) }, onSearch(){ var _this = this; _this.$axios.post('/api/quest/selectByTitle', _this.$qs.stringify({ questionTitle:_this.searchItem, }),{ headers: { access_token: _this.token } } ).then(function (response) { console.log(response.data.data); _this.$router.push({ path:'/searchPage', name:'searchPage',//路由命名 params:{ list:response.data.data, id:_this.id, img:_this.img, token:_this.token }, });//end 頁面跳轉 }).catch(function (error) { console.log(error); _this.$message.error('請求失敗'); }) },//end onSearch函數,進行查找問題 getMessage(){ var _this = this; _this.$router.push({ path:'/messagePage', name:'messagePage', params:{ id:_this.id, img:_this.img, token:_this.token, } }) },//end getMessage函數,獲取消息 getAskedQuestions(){ var _this = this; _this.$axios.post('/api/showQuestByUserId', _this.$qs.stringify({ user_id:_this.userId, }) ).then(function (response) { console.log(response.data); _this.list = response.data.data; }).catch(function (error) { console.log(error); _this.$message.error('請求失敗'); }) },//end getAskedQuestions函數,獲取該用戶的提問 edit(){ var _this = this; _this.$router.push({ path:'/changeInformation', name:'changeInformation', params:{ id:_this.id, img:_this.userImg, token:_this.token, } }) },//end edit函數,編輯個人信息 question(){ var _this = this; _this.$router.push({ path:'/personalQuestion', name:'personalQuestion', params:{ id:_this.id, img:_this.img, token:_this.token, } }) }, changeAnswer(record){ var _this = this; console.log("修改回答:"); console.log(record); console.log("終結狀態:"+record.question_authority_state) _this.$router.push({ path:'/changeAnswer', name:'changeAnswer', params:{ answer_id:record.answer_id, answer_content:record.answer_content, id:_this.id, img:_this.img, token:_this.token, question_id:record.question_id, question_title:record.question_title, question_content:record.question_content, question_authority_state:record.question_authority_state } }) },//end deleteAnswer(record){ var _this = this; _this.$axios.post('/api/answer/deleteAnswer', _this.$qs.stringify({ answerId:record.answer_id, isDeleted:1, }),{headers: {access_token: _this.token}} ).then(function (response) { console.log(response.data); _this.$message.success('删除成功'); _this.list = response.data.data; _this.reload(); }).catch(function (error) { console.log(error); _this.$message.error('删除失敗'); }) }, logout(){ var _this = this; _this.$axios.post('/api/user/leave', _this.$qs.stringify({ uId: this.id, }),{headers: {access_token:_this.token}} ).then(function (response) { console.log(response.data); localStorage.removeItem('access_token'); localStorage.clear(); _this.$router.push({ path:'/login', name:'login', }) }).catch(function (error) { console.log(error); _this.$message.error('請求失敗'); }) },//end exit函數/* seeThisQuestion(record){ var _this = this; console.log(record);//打印問題詳細信息 _this.$router.push({ path:'/detailPage', name:'detailPage',//路由命名 params:{ question_id:record.question_id,//頁面之間的傳值 id:_this.id, img:_this.img, token:_this.token, question_authority_state:record.question_authority_state, question_title:record.question_title, question_content:record.question_content, }, }); },//end seeThisQuestion函數,查看這個問題的詳細信息 }}</script><style scoped></style>

這是回答界面vue框架代碼

 <a-menu v-model="current" mode="horizontal"> <a-menu-item key="answer" @click="answer" style="width: 330px; text-align: center;font-weight: bold"> 回答</a-menu-item> <!-- <a-menu-item key="star" style="width: 330px; text-align: center;font-weight: bold"> 收藏</a-menu-item>--> <a-menu-item key="question" style="width: 330px; text-align: center;font-weight: bold"> 提問</a-menu-item> </a-menu>

menu部分已在其中,不勝感激。




采納答案:
 <a-menu v-model="current" mode="horizontal"> <a-menu-item key="answer" @click="answer" style="width: 330px; text-align: center;font-weight: bold"> 回答</a-menu-item> <!-- <a-menu-item key="star" style="width: 330px; text-align: center;font-weight: bold"> 收藏</a-menu-item>--> <a-menu-item key="question" style="width: 330px; text-align: center;font-weight: bold"> 提問</a-menu-item> </a-menu>

 

你的model設置的默認值是mail 


版权声明:本文为[CSDN問答]所创,转载请带上原文链接,感谢。 https://gsmany.com/2022/01/202201080228314753.html