Vue.js 无法通过vuejs将数组打印到表中
有人能告诉我为什么这个表格没有打印结果吗?axios似乎正在将数据拉入ok并打印到console.log,但视图没有输出到表中Vue.js 无法通过vuejs将数组打印到表中,vue.js,axios,Vue.js,Axios,有人能告诉我为什么这个表格没有打印结果吗?axios似乎正在将数据拉入ok并打印到console.log,但视图没有输出到表中 <table id="app"> <tbody> <tr v-for="user in users"> <td>{{ user.id }}</td> <td>{{ user.name }}</td>
<table id="app">
<tbody>
<tr v-for="user in users">
<td>{{ user.id }}</td>
<td>{{ user.name }}</td>
<td>{{ user.email }}</td>
<td>{{ user.phone }}</td>
</tr>
</tbody>
</table>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.0/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
new Vue({
el: "#app",
data: {
users: []
},
methods: {
getAllUsers: function(){
axios.get("http://example.net/users/process.php?action=read").then(function(response){
if(response.data.error){
app.errorMsg = response.data.message;
}
else{
app.users = response.data.users;
console.log(app.users);
}
});
}
},
mounted(){
this.getAllUsers();
}
})
</script>
{{user.id}
{{user.name}
{{user.email}
{{user.phone}
新Vue({
el:“应用程序”,
数据:{
用户:[]
},
方法:{
getAllUsers:function(){
axios.get(“http://example.net/users/process.php?action=read)然后(函数(响应){
if(response.data.error){
app.errorMsg=response.data.message;
}
否则{
app.users=response.data.users;
console.log(app.users);
}
});
}
},
安装的(){
这个.getAllUsers();
}
})
谢谢你们的时间 哇,你们真快@谢谢你!我使用箭头进行了修改,然后使用这个。用户,它成功了
getAllUsers: function(){
axios.get("http://example.net/users/process.php?action=read").then(response => {
if(response.data.error){
this.errorMsg = response.data.message;
}
else{
this.users = response.data.users;
console.log(this.users);
}
});
}
检查你的控制台。它应该显示vuejs中的一些错误。您是否在任何地方定义
app
?如果不是,则app
将只引用id为app
的元素,这不是您想要的。我建议对使用箭头函数,然后使用回调,这样您就可以使用this.users
。