[英]Fetch all users and display them with vue js
我对 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>
试试这个
<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))
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.