How to display all users in a table using VueJs and Axios?

Question

I'm trying to display my users from database (MYSQL) to a table in vueJs. In below code I tried to display the users in table but it displays nothing. Also when I to console.log I can see

Array(4) 0: {…} 1: {…} 2: {…} 3: {…}

and each time I clicked 0: {…}, I see my JSON. What should I do to display this code in my table.

<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>

and in script

<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>

Thanks for the help!

P.S

I tried to follow this code that was asked also here in StackOverflow.

EDIT: This is the output now

Hi, you said that is failed, what is currently displayed with these code an error or nothing ? — Toothgip
– Toothgip, Commented Jun 20, 2019 at 8:27

BTL · Accepted Answer · 2019-06-20 09:06:19Z

2

You forgot curly brackets !

Here is the code with it :

<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>

answered Jun 20, 2019 at 9:06

BTL

4,7243 gold badges28 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Vin Over a year ago

Thank you! I've been debugging for a long time. Thanks!

Collectives™ on Stack Overflow

How to display all users in a table using VueJs and Axios?

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related