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

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

3 个答案: