如何使用 VueJs 和 Axios 在表格中显示所有用户？答案

【问题标题】：How to display all users in a table using VueJs and Axios?如何使用 VueJs 和 Axios 在表格中显示所有用户？
【发布时间】：2019-11-03 00:47:57
【问题描述】：

我正在尝试将我的用户从数据库 (MYSQL) 显示到 vueJs 中的表中。在下面的代码中，我尝试在表格中显示用户，但它什么也没显示。另外，当我访问 console.log 时，我可以看到

数组(4) 0: {…} 1: {…} 2: {…} 3: {…}

每次我点击 0: {…}，我都会看到我的 JSON。我应该怎么做才能在我的表格中显示此代码。

<template>
<div class="container">
<div class="row">
  <div class="col-md-8 col-md-offset-2">
    <div class="panel panel-default">
      <div class="panel-heading">List of users</div>
      <div class="panel-body">
        <table class="table">
          <thead>
            <tr>
              <th>Firstname</th>
              <th>Lastname</th>
              <th>Email</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="user in users" :key="user.id">
              <td>user.url</td>
              <td>user.lastaname</td>
              <td>user.email</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>

在脚本中

<script>
import QrcodeVue from "qrcode.vue";
import axios from "axios";

export default {
  data() {
    return {

      users: [],

    };
  },
  methods: {
    getUsers() {
      axios
        .get("localhost:2000/user/")
        .then(response => (this.users = response.data))
        .catch(error => console.log(error.message));

  },
  components: {
    QrcodeVue
  },
  mounted() {
    axios
      .get("localhost:2000/user/")
      .then(response => {
        this.results = response.data[1];
        console.log(this.results);
      })
      .catch(err => {
        throw err;
      });
  }
};
</script>

感谢您的帮助！

附言

我尝试关注这个 code 在 StackOverflow 中也被问到。

编辑：这是输出now

【问题讨论】：

您好，您说的是失败，这些代码当前显示的是错误还是什么都没有？
嗨@Toothgip 它什么也不显示。

标签： node.js api vue.js

【解决方案1】：

你忘记了大括号！

这里是它的代码：

<div class="container">
<div class="row">
  <div class="col-md-8 col-md-offset-2">
    <div class="panel panel-default">
      <div class="panel-heading">List of users</div>
      <div class="panel-body">
        <table class="table">
          <thead>
            <tr>
              <th>Firstname</th>
              <th>Lastname</th>
              <th>Email</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="user in users" :key="user.id">
              <td>{{ user.url }}</td>
              <td>{{ user.lastname }}</td>
              <td>{{ user.email }}</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>

【讨论】：

谢谢！我调试了很久。谢谢！