Talking about the pit where the background data obtained by vue can not be displayed to table
- 2021-08-06 20:31:33
- OfStack
Because I just learned vue and then I studied axios myself, and then I want to write a simple query background data
<tr v-for=" user in uList">
<td>{{user.id}}</td>
<td>{{user.name}}</td>
<td>{{user.gender}}</td>
</td>
</tr>
Then I first wrote such a code
created: function () {
axios.get("http://localhost:8080/student/findAll").then(function (response) {
this.uList = response.data;
console.log(uList);
}).catch(function (reason) {
})
}
Then the background can get the data, but it cannot be displayed on table
It is found that although this. uList has changed data, the data cannot be displayed on table
The this here is not an external this object, and then the change is made, and the data is echoed
new Vue({
el:'#app',
data:{
uList:[],
},
created: function () {
var arr = this;
axios.get("http://localhost:8080/student/findAll").then(function (response) {
arr.uList = response.data;
console.log(uList);
}).catch(function (reason) {
})
}
} )
Additional knowledge: vue data has a value, but the page {{}} can't get a value
My problem is that js was introduced in the wrong order, which caused the values in vue not to be displayed normally
The correct order should be:
First introduce js of vue----------------------------------------------------