Nuxt搭配Axios获取数据库用户数组后无法正确在页面渲染的问题

问题根因 #

你遇到的问题核心是后端对返回结果做了重复序列化，导致前端拿到的是JSON字符串而非数组，加上初始值配置不合理，共同造成了页面空白/内容重复的问题：

1. 后端controllers/User.js中，你先用JSON.stringify()将查询到的用户数组转为了字符串，又调用了res.json()方法——res.json()本身会自动对传入的JS值做JSON序列化，两次序列化后返回给前端的是套了两层引号的字符串，而非预期的数组对象。
2. 你遍历字符串时，v-for会把字符串拆成单个字符遍历，自然取不到user.firstName这类属性，所以页面显示空白；直接输出users时就会重复打印整个字符串内容。

修复方案 #

1. 修改后端接口逻辑，删除多余的JSON.stringify调用：

// controllers/User.js 修改后代码
exports.getAll  = async (req, res) => {
    let users = await models.User.findAll();
    // 直接传入原始数组，res.json会自动完成序列化
    res.json(users);
}

2. 优化前端初始化配置，避免初始值为空时遍历报错，把users初始值改为空数组：

// pages/matches.vue script部分修改
export default {
    data() {
        return {
            // 初始值设为空数组而非null，避免v-for遍历null时报错
            users: [],
        };
    },
    // 剩余代码保持不变
}

修改后重新启动前后端服务即可正常按行展示用户的firstName和email字段。

内容的提问来源于stack exchange，提问作者RicoRos