Vue：v-for 不渲染（使用 Node 和 Axios）

Question

我正在尝试从 table 'clients' 中的 MySql 数据库中获取一些数据（稍后制作 CRUD），但是当我尝试时没有呈现任何数据在 v-for 中输出。 'ul' 已呈现，但它是空的，因为未呈现“li”。我没有收到任何错误，只是没有呈现？

我的代码在这里：

Router.js（服务器端）：

// routes/router.js

const express = require('express');
const router = express.Router();

const bcrypt = require('bcryptjs');
const uuid = require('uuid');
const jwt = require('jsonwebtoken');

const db = require('../lib/db.js');
const userMiddleware = require('../middleware/users.js');

// (Working) code for a login - removed here to make it more simple
// (Working) code for a login - removed here to make it more simple
// (Working) code for a login - removed here to make it more simple

router.get('/clients', (req, res, next) => {
    db.query("SELECT * FROM clients", function (err, result, fields) {
        if (err) {
            res.status(400).send();
            throw err;
        }

        console.log(result);
        res.status(200).send(result);
    });
});


module.exports = router;

我的Clients.vue（客户端）：

<template>
  <div>

      Hi {{ username | capitalize }}

      <ul>
        <li :key="client.id" v-for="client in clients">
          <strong>{{ client.name }}</strong>
          <small>{{ client.email }}</small> | <small>{{  client.phone }}</small>
        </li>
      </ul>

      <a href="#" @click="logout">Logout</a>

  </div>
</template>

<script>
  import AuthService from '@/services/AuthService.js';
  import ClientService from '@/services/ClientService.js';

  export default {
    data() {
      return {
        secretMessage: 'Sample secret message',
        username: '',
        clients: []
      };
    },

    async created() {
      if (!this.$store.getters.isLoggedIn) {
        this.$router.push('/login');
      }
      this.username = this.$store.getters.getUser.username;
      this.secretMessage = await AuthService.getSecretContent();

      var self = this
      ClientService.getClients().then((clients) => {
        self.clients = clients;
      });

    },
    methods: {
      logout() {
        this.$store.dispatch('logout');
        this.$router.push('/login');
      }
    },
    filters: {
      capitalize: function (value) {
        if (!value) return ''
        value = value.toString()
        return value.charAt(0).toUpperCase() + value.slice(1)
      }
    },
  };

</script>

我的 ClientService.js 看起来像这样：

// src/services/ClientService.js

import axios from 'axios';
const url = 'http://localhost:3000/api/';
export default {
    getClients() {
        return axios
            .get(url + 'clients/')
            .then(response => response.data);
    }
};

当我运行在 Postman 中获取对“http://localhost:3000/api/clients”的请求时，我收到了正确的数据：

[
    {
        "id": 1,
        "name": "Sample Client One",
        "email": "email-one@domain.com",
        "phone": "12345678"
    },
    {
        "id": 3,
        "name": "Sample Client two",
        "email": "mail-two@domain.com",
        "phone": "12345678"
    }
]

我做错了什么？

//街

Answer 1

从 async created() 中删除 async 将解决此问题。

您可以阅读有关异步函数的更多信息here。您的问题的重要部分是 Vue 组件上创建的方法不应该 return Promise。

Answer 2

函数created是同步的。在文档 https://vuejs.org/v2/api/#created 的详细信息部分显示：

Called synchronously after the instance is created

Vue：v-for 不渲染（使用 Node 和 Axios）

Vue: v-for not rendering (using Node and Axios)

crud

node.js

vue.js

axios

v-for