获取所有用户并使用 vue js 显示它们答案

【问题标题】：Fetch all users and display them with vue js获取所有用户并使用 vue js 显示它们
【发布时间】：2018-04-17 02:18:33
【问题描述】：

我对 Vue js 非常陌生，我现在正尝试通过使用 ajax 调用来获取表中的所有用户。我让用户没有问题，但是当我尝试使用新数据设置 data.user 时，我收到一条错误消息，指出未定义属性或方法用户。这是我的用户列表组件：

<template>
<div class="container">
    <div class="row">
        <div class="col-md-8 col-md-offset-2">
            <div class="panel panel-default">
                <div class="panel-heading">List of users</div>
                <div class="panel-body">
                    <table class="table">
                        <thead>
                          <tr>
                            <th>Firstname</th>
                            <th>Lastname</th>
                            <th>Email</th>
                          </tr>
                        </thead>
                        <tbody>
                          <tr v-for="user in users">
                            <td>user.name</td>
                            <td>user.lastaname</td>
                            <td>user.email</td>
                          </tr>
                      </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
</template>


<script>
export default {

    data: function () {
        return {
          users: []
        }
    },

    mounted() {
        axios.get('/users')
            .then(function (response) {
            console.log(response.data);
        })
        .catch(function (error) {
            console.log(error.message);
        });
    },

}
</script>

【问题讨论】：

标签： javascript laravel vuejs2 vue-component

【解决方案1】：

试试这个

<script>
export default {

    data: function () {
        return {
          users: []
        }
    },

    methods: {

      getUsers: function() {

        var app = this;

         axios.get('/users')
            .then(function (response) {
            app.users = response.data;
        })
        .catch(function (error) {
            console.log(error.message);
        });

      }

    },

    created() {
      this.getUsers();
    },

    }

ES6 语法

  getUsers() {

     axios.get('/users')
      .then((response) => this.users = response.data)
      .catch((error) => console.log(error.message))

  }

【讨论】：