javascript - Vue.js - JSON API 数据不会出现在点击事件上

Question

我的 VueJS 项目遇到了困难。

我正在尝试获取单击事件以显示来自 JSON API 的其他用户数据。

控制台识别出点击事件，但由于某种奇怪的原因，我试图切换的其他数据都没有出现。

我怀疑该方法有问题，或者可能是单击事件配置不正确，因为数据在那里，但没有显示 - 控制台中也没有错误。

任何建议将不胜感激！

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

标签： javascriptjsonapivue.jsvuejs2

Answer 1

我能够毫无问题地重现该示例。也许这只是一个错字？

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>