Question

我正在尝试使用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.scripts中的用户返回一个带有值的对象。

<!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>

Answer 1

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

<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>

Answer 2

更新

问题在this回调中包含axios api。

这不是解释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

Answer 3

您正确启动了Vue吗？

请参阅此官方文档。 https://vuejs.org/v2/guide/index.html

如果您在其他文件中启动了Vue，而这仅仅是组件定义，您仍然应该遵循组件定义。然后调用Axios内部装载生命周期，并将用户定义为数据或计算用户。

Vue-使用Axios填充表格

3 个答案: