loading一直不结束，以及主页下方无列表展示

Question

主页一直挂载loading，一直在转圈，能问一下哪里出了什么问题吗仓库号https://gitee.com/xinyi200622/forum

Answer 1

张轩 3小时前

同学你好，这两个问题的原因和解决是：

1. 列表不显示：axios 已经在响应拦截器里把返回值变成 response.data，但 getAndCommit/postAndCommit 仍使用 { data } 解构，导致 mutation 收到的结构错了，rawData.data.list 读不到。

2. 卡片变形：.card-body 被固定成 50px × 50px，内容被挤压；改成 flex 并让宽高自适应后恢复正常布局。

具体代码修改如下：

src/stores/store.ts

// getAndCommit
const data = await axios.get(url)
commit(mutationName, data)
return data

// postAndCommit
const data = await axios.post(url, payload)
commit(mutationName, data)
return data

src/components/ColumnList.vue

<div v-for="column in columnList" :key="column._id" class="col-4 mt-4">
  <div class="card h-100 shadow-sm">
    ...
  </div>
</div>

.card {
  width: 18rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.card-body {
  width: 100%;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.card-body .btn {
  margin-top: auto;
}

Answer 2

张轩 1天前

同学你好

请问你这个问题解决了吗？我在本地尝试已经没有这个 loading 状态了，数据也能返回，但是列表还没有成功渲染。

• 提问者 邺池 #1

  没有 ꒦ິ^꒦ິ

• 提问者 邺池 #2

  老师不转圈了，但是列表还是无法显示