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

Question

我无法从 API 获取或显示数据，但是当我 console.log 问题时 API 工作正常。但是我无法在 table 中显示数据我使用了 v-for 我是 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

您可能想在 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 的方式重新呈现。

Answer 3

谢谢你们抽出宝贵时间我使用了你们的代码，但几乎没有更正

这是最终有效的代码

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

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

I cannot display data form an API using v-for in vuejs

vue.js

vue-component

axios

vuejs2

v-for