Vue - 使用 Axios 填充表格答案

【问题标题】：Vue - Populate table with AxiosVue - 使用 Axios 填充表格
【发布时间】：2019-06-17 09:09:16
【问题描述】：

我正在尝试用 axios 和 vue 填充表格，如下所示：

    <div class="container  h-100">
        <div class="row h-100 justify-content-center align-items-center">
            <table class="table table-striped table-bordered table-hover">
                <thead class="thead-dark">
                    <tr>
                        <th>#</th>
                        <th>First</th>
                        <th>Last</th>
                        <th>Handle</th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="user in users">
                        <td>{{user.name}}</td>
                        <td>{{user.username}}</td>
                        <td>{{user.email}}</td>
                        <td>{{user.phone}}</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
    var users;
    axios.get('https://jsonplaceholder.typicode.com/users')
        .then(function (response) {
            users = response['data'];
        })
        .catch(function (error) {
            console.log(error);
        })
</script>

问题是 {{user.name}} 返回 '{{user.name}}' ，不显示真实数据。有人知道如何使用 vue 在表格中显示数组数据吗？

更新

我使用此代码进行了更新，但视图仍然为空。如果我在脚本中返回 this.users，则返回一个带有值的对象。

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
        <title>Tabla</title>
        <style>
            body,
            html {
                height: 100%;
            }
        </style>
    </head>

    <body>
        <div id="tabla">
            <div class="container  h-100">
                <div class="row h-100 justify-content-center align-items-center">
                    <table class="table table-striped table-bordered table-hover text-center">
                        <thead class="thead-dark">
                            <tr>
                                <th>Name</th>
                                <th>Username</th>
                                <th>Email</th>
                                <th>Phone</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr v-for="user in users">
                                <td>{{user.name}}</td>
                                <td>{{user.username}}</td>
                                <td>{{user.email}}</td>
                                <td>{{user.phone}}</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </body>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script>
        new Vue({
            el: '#tabla',
            data: {
                users: [],
            },
            created: function () {
                this.load();
            },
            methods: {
                load: function () {
                    axios
                        .get('https://jsonplaceholder.typicode.com/users')
                        .then(function (response) {
                            this.users = response.data;
                        })
                        .catch(function (error) {
                            console.log(error);
                        })
                }
            }
        })
    </script>

</html>

【问题讨论】：

这不像vue组件？我们可以得到一个可运行的 sn-p 吗？

标签： vue.js axios

【解决方案1】：

更新

问题在于您的axios api 回调中的this。

这里不适合解释this 非常解释。

在简单的上下文中 - this 是 function 是其属性的对象。并且在您的情况下，this 获取 window 对象，因为您正在使用 function 这不是 lexically 范围内的。使其lexically作用域使用ES6 Arrow fn

new Vue({
  el: "#app",
  data() {
  	return {
    	users: []
    }
  },
  mounted: function() {
      axios
        .get('https://jsonplaceholder.typicode.com/users')
        .then(response => {
          this.users = response.data
        })
        .catch(function (error) {
          console.log(error);
        })
    }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

<div id="app">

  <table>
      <thead class="thead-dark">
                    <tr>
                        <th>#</th>
                        <th>First</th>
                        <th>Last</th>
                        <th>Handle</th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="user in users" :key="user.email">
                        <td>{{user.name}}</td>
                        <td>{{user.username}}</td>
                        <td>{{user.email}}</td>
                        <td>{{user.phone}}</td>
                    </tr>
                </tbody>
  </table>
</div>

您需要创建vue instance，将您的html 绑定到它。

假设你有html，它有一个id = app

<div id="app">
  {{ message }}
</div>

现在如果你想让这段html使用vue，你需要绑定它。

var app = new Vue({
  el: '#app', // This property el binds the container #app
  data: {
    message: 'Hello Vue!' // here you create your data values you want to use
  }
})

不过，我建议您在使用之前查看 vue 很棒的文档 - Vue JS

【讨论】：

嘿@ElHombreSinNombre 更新答案

【解决方案2】：

您没有在 vue 实例中定义 users。您应该创建一个 vue 实例并在 data 部分中定义 users。

<body>
  <div id="app">
    // Paste all of your html in here
  </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
  new Vue({
    el: '#app',
    data: {
      users: []
    },
    mounted: function() {
      axios
        .get('https://jsonplaceholder.typicode.com/users')
        .then(function (response) {
          this.users = response['data'];
        })
        .catch(function (error) {
          console.log(error);
        })
    }
  })
</script>

【讨论】：

正确但表返回空，打印值时出现问题：/

【解决方案3】：

您是否正确启动了 Vue ？

看看这个官方文档。 https://vuejs.org/v2/guide/index.html

如果您在其他文件中启动了 Vue，并且这只是组件定义，您仍然需要遵循组件定义。并在 mount 生命周期中调用 Axios 并将用户定义为数据或计算。

【讨论】：