我无法在 vuejs 中使用 v-for 从 API 中显示数据

Posted 2023-02-23

【中文标题】我无法在 vuejs 中使用 v-for 从 API 中显示数据

【英文标题】：I cannot display data form an API using v-for in vuejs

【发布时间】：2019-09-15 15:08:03

【问题描述】：

我无法从 API 获取或显示数据，但是当我 console.log 问题时 API 工作正常。但我无法在我使用 v 的表中显示数据，因为我是 Vue.js 新手，我不知道如何解决这个问题

我正在使用 Vue.js 2，Axios 方法连接到我的 API

这是我的代码

import axios from 'axios'

export default
  data()
    return
      errorMessage: "",
      successMessage: "",
      users: []
    
  ,
  mounted: function()
    this.getAllUsers();
  ,
  methods:
    getAllUsers: function()
      axios.get('http://localhost:8888/vue-and-php/public/api/config.php?action=read',  crossdomain: true )
      .then(function(response)
        //console.log(response);
        if(response.data.error)
          app.errorMessage = response.data.message;
        else
          app.users = response.data.users;
        
      );
    
  

这是我想展示我的数据的地方

                <!--test PHP-->
                  <button class="fright addNew btn-sm btn-success" data-toggle="modal" data-target="#exampleModalLong">Add New</button>
                  <p class="errorMessage alert alert-danger" v-if="errorMessage">
                    errorMessage
                  </p>
                  <p class="successMessage alert alert-success" v-if="successMessage">
                    successMessage
                  </p>
                  <table class="table">
                    <tr>
                      <th>ID</th>
                      <th>User Name</th>
                      <th>Name</th>
                      <th>Email</th>
                      <th>Edit</th>
                      <th>Delete</th>
                    </tr>
                    <tr v-for="user in users">
                      <td>user.id</td>
                      <td>user.username</td>
                      <td>user.name</td>
                      <td>user.email</td>
                      <td><button class="btn btn-sm btn-success">ADD</button></td>
                      <td><button class="btn btn-sm btn-danger">DELETE</button></td>
                    </tr>
                  </table>

【问题讨论】：

为什么将响应设置为app.users？我希望this.users...

我假设你可以登录response.data.message?

【参考方案1】：

你做不到

app.users = response.data.users;

由于应用程序未在任何地方定义，并且您的浏览器控制台一定会抛出错误，因此这里尝试做的是分配您在数据函数中定义的用户。

用户对象存在于当前上下文中，可以通过“this”关键字访问。

试试看：

if(response.data.error)
    this.errorMessage = response.data.message;

else
    this.users = response.data.users;

【参考方案2】：

感谢大家抽出宝贵的时间，我使用了您的代码，但几乎没有更正

这是工作的最终代码

    getAllUsers: function()
      axios.get('http://localhost:8888/vue-and-php/public/api/config.php?action=read',  crossdomain: true )
      .then((response) => 
        //console.log(response);
        if(response.data.error)
          this.errorMessage = response.data.message;
        else
          this.users = response.data.users;
        
        );
    

【参考方案3】：

您可能希望在users 数据字段中设置一些信息。您需要执行以下操作：

if (response.data.error) 
    this.errorMessage = response.data.message;
 else 
    this.users = response.data.users;

解释：Vue 对data 和props 的变化做出反应。通过执行 this.users = response.data.users，您告诉 Vue users 已更改，然后 Vue 将根据您在模板中使用 users 的方式重新渲染。

【讨论】：

感谢您的宝贵时间，但我完全按照您所说的做了，但我收到错误消息“Faq.vue?2d60:172 Uncaught (in promise) TypeError: Cannot set property 'users' of undefined在 eval (Faq.vue?2d60:172)"

@BeingMR.G：可能是因为您没有将它与您的方法绑定。尝试并更喜欢这个：` getAllUsers() ... ` 而不是 ` getAllUsers: function() `