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


Related articles: