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

Question

我无法从 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>

Answer 1

你做不到

app.users = response.data.users;

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

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

试试看：

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

Answer 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;
        }
        });
    }

Answer 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 的方式重新渲染。