Vue.js - JSON API data doesn't appear on click event

Question

I'm having difficulties with a VueJS project of mine.

I'm trying to get a click event to show additional user data from a JSON API.

The console recognizes the click event, but for some odd reason, none of the additional data that I'm trying to toggle, appears.

I'm suspecting that the method is at fault, or maybe perhaps that the click event isn't configured properly, because the data is there, but nothing shows -- no errors in the console either.

Any suggestions would be greatly appreciated!

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<template>
    <section class="middleSection">
    <div class="container">
    <div class="row">
      <div class="col-12">
            <table class="table table-dark">
                <thead>
                    <tr>
                        <th>Name</th>
                        <th>User name</th>
                        <th>Email</th>
                    </tr>
                </thead>
                <tbody v-for="(user, index) in users" :key="index">
                  <tr data-toggle="collapse" @click="showInfo(userInfo)">
                    <td>{{ user.name }}</td>
                    <td>{{ user.username }}</td>
                    <td>{{ user.email }}</td>
                  </tr>
                </tbody>
            </table>

            <div v-if="userInfo" class="card card-body">
              <div>{{ userInfo.name }}</div>
              <div>{{ userInfo.username }}</div>
              <div>{{ userInfo.adress.street }}</div>
              <div>{{ userInfo.address.suite }}</div>
              <div>{{ userInfo.address.city }}</div>
              <div>{{ userInfo.address.zipcode }}</div>
            </div>


        </div>
        </div>
        </div>
    </section>
</template>

<script>

export default {
  name: "middleSection",
  data() {
    return {
      users: [],
      userInfo: null
    }
  },

  methods: {
    showInfo(userId) {
      
      for (const user of this.users) {
        
        if (user.id == userId) {
          
          this.userInfo = user
          console.log(this.userInfo)
        }
      }
    }
  },


  created() {
    // Fetch JSON data
              fetch('https://jsonplaceholder.typicode.com/users/')
                  .then(response => response.json())
                    .then(json => {
                    this.users = json
                  }) 
  }
}

</script>

<style>

.col-12 {
  padding-left: 0 !important;
  padding-right: 0 !important;
}
  .middleSection {
    height: 87vh;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 5vh !important;
  }
</style>

Boussadjra Brahim · Accepted Answer · 2020-02-15 16:28:01Z

First, you'e making a typo by missing 'd' in <div>{{ userInfo.adress.street }}</div>, second your loop should be in <tr> element, finally pass user.id as parameter in @click="showInfo(user.id)"

Vue.config.devtools = false;
Vue.config.productionTip = false;
new Vue({
  el: '#app',
  data() {
    return {
      users: [],
      userInfo: null
    }
  },

  methods: {
    showInfo(userId) {

      for (const user of this.users) {

        if (user.id == userId) {

          this.userInfo = user
          console.log(this.userInfo)
        }
      }
    }
  },


  created() {
    // Fetch JSON data
    fetch('https://jsonplaceholder.typicode.com/users/')
      .then(response => response.json())
      .then(json => {
        this.users = json
      })
  }
})

.col-12 {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.middleSection {
  height: 87vh;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 5vh !important;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css" />

<div id="app">
  <section class="middleSection">
    <div class="container">
      <div class="row">
        <div class="col-12">
          <table class="table table-dark">
            <thead>
              <tr>
                <th>Name</th>
                <th>User name</th>
                <th>Email</th>
              </tr>
            </thead>
            <tbody >
              <tr data-toggle="collapse" v-for="(user, index) in users" :key="index"  @click="showInfo(user.id)">
                <td>{{ user.name }}</td>
                <td>{{ user.username }}</td>
                <td>{{ user.email }}</td>
              </tr>
            </tbody>
          </table>

          <div v-if="userInfo" class="card card-body">
            <div>{{ userInfo.name }}</div>
            <div>{{ userInfo.username }}</div>
            <div>{{ userInfo.address.street }}</div>
            <div>{{ userInfo.address.suite }}</div>
            <div>{{ userInfo.address.city }}</div>
            <div>{{ userInfo.address.zipcode }}</div>
          </div>


        </div>
      </div>
    </div>
  </section>
</div>

Pierre Said · Accepted Answer · 2020-02-15 16:18:50Z

I was able to reproduce the example without any issue. Maybe it was just a typo ?

Vue.config.devtools = false;
Vue.config.productionTip = false;

var app = new Vue({
  el: '#app',
  data: {
    users: [],
    userInfo: null
  },
  methods: {
    showInfo(userId) {
      for (const user of this.users) {
        if (user.id == userId) {
          this.userInfo = user
          console.log(this.userInfo)
        }
      }
    }
  },
  created() {
    // Fetch JSON data
    fetch('https://jsonplaceholder.typicode.com/users/')
      .then(response => response.json())
      .then(json => {
        this.users = json
      })
  }
})

.col-12 {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.middleSection {
  height: 87vh;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 5vh !important;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <section class="middleSection">
    <div class="container">
      <div class="row">
        <div class="col-12">
          <table class="table table-dark">
            <thead>
              <tr>
                <th>Name</th>
                <th>User name</th>
                <th>Email</th>
              </tr>
            </thead>
            <tbody v-for="(user, index) in users" :key="index">
              <tr data-toggle="collapse" @click="showInfo(userInfo)">
                <td>{{ user.name }}</td>
                <td>{{ user.username }}</td>
                <td>{{ user.email }}</td>
              </tr>
            </tbody>
          </table>

          <div v-if="userInfo" class="card card-body">
            <div>{{ userInfo.name }}</div>
            <div>{{ userInfo.username }}</div>
            <div>{{ userInfo.adress.street }}</div>
            <div>{{ userInfo.address.suite }}</div>
            <div>{{ userInfo.address.city }}</div>
            <div>{{ userInfo.address.zipcode }}</div>
          </div>
        </div>
      </div>
    </div>
  </section>
</div>

Collectives™ on Stack Overflow

Vue.js - JSON API data doesn't appear on click event

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related