fix(ui): 修复移动端数据加载显示
- 为 topic-card-list 添加 v-if 条件渲染 - 添加空状态提示 - 增强调试信息(console.log) - 确保移动端卡片列表正确显示
This commit is contained in:
@@ -143,7 +143,7 @@
|
|||||||
</el-table-column>
|
</el-table-column>
|
||||||
</el-table>
|
</el-table>
|
||||||
<!-- 移动端卡片列表 -->
|
<!-- 移动端卡片列表 -->
|
||||||
<div class="topic-card-list">
|
<div class="topic-card-list" v-if="filteredTopics && filteredTopics.length > 0">
|
||||||
<div v-for="topic in filteredTopics" :key="topic.id" class="topic-card">
|
<div v-for="topic in filteredTopics" :key="topic.id" class="topic-card">
|
||||||
<div class="topic-card-header">
|
<div class="topic-card-header">
|
||||||
<div class="topic-card-title">{{ topic.title }}</div>
|
<div class="topic-card-title">{{ topic.title }}</div>
|
||||||
@@ -185,12 +185,20 @@
|
|||||||
const TopicsApp = {
|
const TopicsApp = {
|
||||||
data() { return { isLoggedIn: false, isAdmin: false, currentUser: { username: '' }, topics: [], filterStatus: '', selectedTopicIds: [], loadingTable: false } },
|
data() { return { isLoggedIn: false, isAdmin: false, currentUser: { username: '' }, topics: [], filterStatus: '', selectedTopicIds: [], loadingTable: false } },
|
||||||
computed: {
|
computed: {
|
||||||
filteredTopics() { if (!this.topics.length) return []; if (!this.filterStatus) return this.topics; return this.topics.filter(t => t.status === this.filterStatus); },
|
filteredTopics() {
|
||||||
|
console.log('[DEBUG] filteredTopics called, filterStatus:', this.filterStatus, 'topics count:', this.topics.length);
|
||||||
|
if (!this.topics.length) { console.log('[DEBUG] topics is empty'); return []; }
|
||||||
|
if (!this.filterStatus) { console.log('[DEBUG] no filter, return all'); return this.topics; }
|
||||||
|
const result = this.topics.filter(t => t.status === this.filterStatus);
|
||||||
|
console.log('[DEBUG] filtered result count:', result.length);
|
||||||
|
return result;
|
||||||
|
},
|
||||||
countByStatus() { return (status) => this.topics.filter(t => t.status === status).length; }
|
countByStatus() { return (status) => this.topics.filter(t => t.status === status).length; }
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
async fetchTopics() {
|
async fetchTopics() {
|
||||||
this.loadingTable = true;
|
this.loadingTable = true;
|
||||||
|
console.log('[DEBUG] fetchTopics called');
|
||||||
try {
|
try {
|
||||||
const token = localStorage.getItem('authToken');
|
const token = localStorage.getItem('authToken');
|
||||||
const response = await fetch('/api/topics', { headers: { 'Authorization': 'Bearer ' + token } });
|
const response = await fetch('/api/topics', { headers: { 'Authorization': 'Bearer ' + token } });
|
||||||
|
|||||||
Reference in New Issue
Block a user