Nuxt/Axios -无法在页面上正确显示来自数据库的数组

Question

更新(7月18日)：根据我在这个线程中收到的帮助进行了更改，并更新了有效负载和面临的问题。

我对Nuxt和Axios非常陌生，在从数据库中显示来自数组的简单数据列表方面有很大的困难。到目前为止，我只得到一个空白的屏幕。但是，如果我在Vue页面(pages/Mates.vue)中将{{ user.firstName }} - {{ user.email }}更改为{{ users }}，则几乎无限次地在页面上显示以下内容：

[{"id":1,"email":"rico.rosenkrans@inovium.dk","password":"$2a$10$d1G/b9CRfoOxqihzrrG18uYqFgwM91VcJbJPHoBZzY8EGKFgjoFUC","firstName":"Rico","lastName":"Rosenkrans","age":35,"gender":"Mand","createdAt":"2021-07-16T20:53:14.000Z","updatedAt":"2021-07-16T20:53:14.000Z"},{"id":2,"email":"test@test.dk","password":"$2a$10$GnKUl5vA0n9ds4X.WGOc9e..XjVeJQJaY7/39UyusDWo7dBCx3jVK","firstName":"Rico","lastName":"Rosenkrans","age":32,"gender":"Kvinde","createdAt":"2021-07-16T23:37:16.000Z","updatedAt":"2021-07-16T23:37:16.000Z"}]
[{"id":1,"email":"rico.rosenkrans@inovium.dk","password":"$2a$10$d1G/b9CRfoOxqihzrrG18uYqFgwM91VcJbJPHoBZzY8EGKFgjoFUC","firstName":"Rico","lastName":"Rosenkrans","age":35,"gender":"Mand","createdAt":"2021-07-16T20:53:14.000Z","updatedAt":"2021-07-16T20:53:14.000Z"},{"id":2,"email":"test@test.dk","password":"$2a$10$GnKUl5vA0n9ds4X.WGOc9e..XjVeJQJaY7/39UyusDWo7dBCx3jVK","firstName":"Rico","lastName":"Rosenkrans","age":32,"gender":"Kvinde","createdAt":"2021-07-16T23:37:16.000Z","updatedAt":"2021-07-16T23:37:16.000Z"}]
[{"id":1,"email":"rico.rosenkrans@inovium.dk","password":"$2a$10$d1G/b9CRfoOxqihzrrG18uYqFgwM91VcJbJPHoBZzY8EGKFgjoFUC","firstName":"Rico","lastName":"Rosenkrans","age":35,"gender":"Mand","createdAt":"2021-07-16T20:53:14.000Z","updatedAt":"2021-07-16T20:53:14.000Z"},{"id":2,"email":"test@test.dk","password":"$2a$10$GnKUl5vA0n9ds4X.WGOc9e..XjVeJQJaY7/39UyusDWo7dBCx3jVK","firstName":"Rico","lastName":"Rosenkrans","age":32,"gender":"Kvinde","createdAt":"2021-07-16T23:37:16.000Z","updatedAt":"2021-07-16T23:37:16.000Z"}]
[{"id":1,"email":"rico.rosenkrans@inovium.dk","password":"$2a$10$d1G/b9CRfoOxqihzrrG18uYqFgwM91VcJbJPHoBZzY8EGKFgjoFUC","firstName":"Rico","lastName":"Rosenkrans","age":35,"gender":"Mand","createdAt":"2021-07-16T20:53:14.000Z","updatedAt":"2021-07-16T20:53:14.000Z"},{"id":2,"email":"test@test.dk","password":"$2a$10$GnKUl5vA0n9ds4X.WGOc9e..XjVeJQJaY7/39UyusDWo7dBCx3jVK","firstName":"Rico","lastName":"Rosenkrans","age":32,"gender":"Kvinde","createdAt":"2021-07-16T23:37:16.000Z","updatedAt":"2021-07-16T23:37:16.000Z"}]
[{"id":1,"email":"rico.rosenkrans@inovium.dk","password":"$2a$10$d1G/b9CRfoOxqihzrrG18uYqFgwM91VcJbJPHoBZzY8EGKFgjoFUC","firstName":"Rico","lastName":"Rosenkrans","age":35,"gender":"Mand","createdAt":"2021-07-16T20:53:14.000Z","updatedAt":"2021-07-16T20:53:14.000Z"},{"id":2,"email":"test@test.dk","password":"$2a$10$GnKUl5vA0n9ds4X.WGOc9e..XjVeJQJaY7/39UyusDWo7dBCx3jVK","firstName":"Rico","lastName":"Rosenkrans","age":32,"gender":"Kvinde","createdAt":"2021-07-16T23:37:16.000Z","updatedAt":"2021-07-16T23:37:16.000Z"}]

我想要的是显示，是每个用户'firstName‘和’电子邮件‘每一行。

这是我的代码：

页/匹配

<template>
    <section class="container mx-auto px-4 sm:px-6 lg:px-8  py-3">

        <div class="container w-full flex flex-wrap mx-auto px-12 pt-4 lg:pt-2 mt-6 ">
            <section class="w-full lg:w-4/5">
            <div id="app-4">
                <ol>
                    <li v-for="user in users" :key="user.id">
                        {{ user.firstName }} - {{ user.email }}
                    </li>
                </ol>
            </div>
            <!--divider-->
            </section>
        </div>
    </section>
</template>

<script>


export default {
    data() {
        return {
            users: null,
        };
    },
    mounted() {
        this.$axios
        .get('/api/users/all')
        .then(response => {
            this.users = response.data;
        })
        .catch(err => {
            throw err;
        });
    }
}
</script>

router.js

// Get all Users
router.get(
    '/api/users/all', 
    UserController.getAll // Log in the User using the UserController (controllers/User.js)
)

控制器/User.js

// Find all users
exports.getAll  = async (req, res) => {
    let users = await models.User.findAll();
    let allUsers = JSON.stringify(users);
    res.json(allUsers);
}

如果我是console.log allUsers，这就是我得到的：

[
{"id":1,"email":"rico.rosenkrans@inovium.dk","password":"$2a$10$d1G/b9CRfoOxqihzrrG18uYqFgwM91VcJbJPHoBZzY8EGKFgjoFUC","firstName":"Rico","lastName":"Rosenkrans","age":35,"gender":"Mand","createdAt":"2021-07-16T20:53:14.000Z","updatedAt":"2021-07-16T20:53:14.000Z"},
{"id":2,"email":"test@test.dk","password":"$2a$10$GnKUl5vA0n9ds4X.WGOc9e..XjVeJQJaY7/39UyusDWo7dBCx3jVK","firstName":"Rico","lastName":"Rosenkrans","age":32,"gender":"Kvinde","createdAt":"2021-07-16T23:37:16.000Z","updatedAt":"2021-07-16T23:37:16.000Z"}
]

你们谁能看出问题出在哪里？

Answer 1

你能试一下：

mounted() {
    this.$axios
    .get('/api/users/all')
    .then(response => {
        this.users = response.data;
      
        return response.data;
        // console.log("HERE : " + this.users);
        
    })
    .catch(err => {
        throw err;
    });
}

点是跳过JSON.stringify部件并从响应中获得确切的用户数组。之后，在HTML代码中，

<li v-for="user in users" :key="user.id">
   {{ user.firstName }}  {{ user.email }} <!-- Depending on how the users are structured in the model -->
</li>