关于#前端#的问题，如何解决？
前端问题
进入项目后，点击上面的 项目列表 未显示列表页
本人不是技术人员，请讲详细点，或者改好我复制，:)谢谢了
列表页代码
<template>
<div>
<div v-if="listDetails">
<ProjectList v-if="activeName == 'projectList'" :allindex="allindex" :projectItemAll="projectItemAll">ProjectList>
<ProjectChao v-if="activeName == 'projectChao'" :allindex="allindex" :projectItemAll="projectItemAll">ProjectChao>
<ProjectEnd v-if="activeName == 'projectEnd'" :allindex="allindex" :projectItemAll="projectItemAll">ProjectEnd>
<AddProject v-if="activeName == 'addProject'">AddProject>
div>
<div v-else>
<ProjectDetails
:projectItem="projectItem"
:projectItemAll="projectItemAll"
>ProjectDetails>
div>
div>
template>
<script>
import bus from "@/utils/eventBus.js";
import ProjectList from "./projectList/projectList.vue";
import ProjectChao from "./projectList/projectList_chao.vue";
import ProjectEnd from "./projectList/projectList_end.vue";
import AddProject from "./projectList/addProject.vue";
import ProjectDetails from "../project/projectDetails/detailsIndex.vue";
import PlusApi from "@/api/plus.js";
export default {
components: {
ProjectList,
ProjectChao,
ProjectEnd,
AddProject,
ProjectDetails,
},
data() {
return {
// 显示列表还是详情
listDetails: true,
// 项目列表页的tab切换
activeName: "projectList",
/*参数*/
param: {},
/*切换数组原始数据*/
sourceList: [
{
key: "projectList",
value: "项目列表",
path: "/plus/project/projectList/projectList",
},
{
key: "projectChao",
value: "超预算",
path: "/plus/project/projectList/projectList_chao",
},
{
key: "projectEnd",
value: "已结束",
path: "/plus/project/projectList/projectList_end",
},
{
key: "addProject",
value: "添加项目",
path: "/plus/project/projectList/addProject",
},
],
/*权限筛选后的数据*/
tabList: [],
// 统计页面跳转过来的
allindex: true,
// projectItemAll:''
};
},
mounted() {
this.tabList = this.authFilter();
console.log('=========');
console.log(this.tabList);
if (this.tabList.length > 0) {
this.activeName = this.tabList[0].key;
}
if (this.$route.query.type != null) {
this.activeName = this.$route.query.type;
}
console.log('====1=====');1
console.log(this.activeName);
if (this.projectItemAll) {
this.projectItemAll = this.projectItemAll;
}
// 监听子组件传递的项目id
bus.$on("projectItem", (res) => {
this.projectItem = res;
});
// 监听子组件传递的切换选中页面的值
bus.$on("listDetails", (res) => {
this.listDetails = res;
});
/*监听传插件的值*/
bus.$on("activeValue", (res) => {
this.activeName = res;
});
//发送类别切换
let params = {
active: this.activeName,
list: this.tabList,
tab_type: "distribution",
};
bus.$emit("tabData", params);
},
beforeDestroy() {
//发送类别切换
bus.$emit("tabData", { active: null, tab_type: "distribution", list: [] });
bus.$off("activeValue");
},
methods: {
/*权限过滤*/
authFilter() {
let list = [];
for (let i = 0; i < this.sourceList.length; i++) {
let item = this.sourceList[i];
// if (this.$filter.isAuth(item.path)) {
// console.log(item);
list.push(item);
// }
}
console.log(list);
return list;
},
},
};
script>
内容页代码
<template>
<div>
<el-page-header @back="goBack" :content="projectItem.project_name">
el-page-header>
<el-tabs v-model="activeDetailsTab" @tab-click="handleProject">
<el-tab-pane label="进展" name="evolve">
<Evolve
:projectItem="projectItem"
:projectItemAll="projectItemAll"
>Evolve>
el-tab-pane>
<el-tab-pane label="成员" name="member">
<Member
:projectItem="projectItem"
:projectItemAll="projectItemAll"
>Member>
el-tab-pane>
<el-tab-pane label="详情" name="details">
<Details
:projectItem="projectItem"
:projectItemAll="projectItemAll"
>Details>
el-tab-pane>
<el-tab-pane label="文件" name="file">
<File
:projectItem="projectItem"
:projectItemAll="projectItemAll"
>File>
el-tab-pane>
el-tabs>
div>
template>
<script>
import bus from "@/utils/eventBus.js";
import Evolve from "./evolve";
import Member from "./member";
// import Details from "./details";
import Details from "../projectList/addProject.vue";
import File from "./file";
export default {
components: {
Evolve,
Member,
Details,
File,
},
props: ["projectItem", "projectItemAll"],
data() {
return {
// 详情页tab切换
activeDetailsTab: "evolve",
};
},
created() {
},
methods: {
// 点击返回项目列表页
goBack() {
bus.$emit("listDetails", true);
},
handleProject(tab, event) {
},
},
};
script>
<style>
.el-page-header {
margin-bottom: 30px;
}
style>
根据问题描述和代码片段，可以初步分析如下：
1. 出现问题的位置是在前端页面中，点击“项目列表”时未显示列表页，而是停留在当前页面。
2. 问题可能出现在列表页代码中，因为点击“项目列表”应该触发列表页的显示。
3. 列表页代码中，存在 v-if 判断，根据条件显示不同的子组件，可能出现问题。
4. 在列表页组件的 mounted 钩子函数中，存在对 tabList 数组的赋值，但该数组为空，可能需要通过权限过滤等方式获取正确的数据。
5. 在列表页组件的切换选中页面的值的方法中，存在对 activeName 值的修改，该方法需要正确触发，否则切换页面会出现问题。
6. 在详情页代码中，存在 v-model 双向绑定的 activeDetailsTab 值，该值可能未正确绑定到父组件中传递的 activeName 值，导致切换页面出错。
根据以上分析，建议依次检查以下方面：
1. 确认“项目列表”按钮是否正确绑定到列表页组件中。
2. 检查列表页组件中 v-if 判断的条件是否正确。
3. 确认列表页组件中的数据源是否正确获取，是否进行了权限过滤。
4. 确认点击切换页面的方法是否正确触发，并且修改的是正确
进入项目后，点击上面的项目列表未显示列表页，是由于当前已经选中了列表页的情况下，再点击它是不会刷新的。我看你已经写了一个GO Back的按钮，这个按钮实现的功能就是返回到项目列表页，所以你应该点击这个而不是上面的项目列表。其次如果你要实现点击上面的项目列表回到项目列表页，那你需要重新写一个点击的事件，重新加载项目列表
引用chatGPT作答，从列表页的代码来看，可以发现在 div 标签内分别使用了 v-if 和 v-else，这说明这两个条件是互斥的，只会有一个条件为 true，另一个条件必定为 false。而在 v-if 的条件判断中，listDetails 为 true 时，会显示项目列表页的组件；而在 v-else 中，则会显示项目详情页的组件。因此，如果点击项目列表后未显示列表页，那么很可能是 listDetails 的值为 false，导致显示的是项目详情页组件。
在代码中找到 listDetails 的定义位置，发现它的初始值是 true，并且没有看到它的值被修改的代码。但是在 mounted() 方法中有一段代码：
if (this.projectItemAll) {
this.projectItemAll = this.projectItemAll;
}
这里的逻辑是，如果 projectItemAll 的值存在，则将它的值赋给 projectItemAll。但是这样的赋值操作实际上是没有意义的，因为赋值的左右两侧都是同一个变量，相当于什么也没做。因此，可以将这段代码删除。
至于为什么这段代码会影响 listDetails 的值，是因为在 div 标签内使用了 v-if 和 v-else，这使得 listDetails 的值需要在这两个条件之间切换。但是在 mounted() 方法中的这段代码中，projectItemAll 的值被赋给了 this.projectItemAll，这使得 this.projectItemAll 的值为非 null 或 undefined 时，listDetails 的值会被重置为 false。
因此，只需将 mounted() 方法中的这段代码删除即可解决这个问题。