Question

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

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

  }

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

1 个答案: