为什么我的 VUE 数组元素没有渲染，

Question

I can get the elements sent from the backend.But the text can't display.I don't know why. here is my html:

              <!-- <form action=""> -->
                <div class=" form-group">
                  <input v-model="wd" @keyup="keyup($event)"  type="text" class="form-control" />

                  <!-- <ul class="list-group"> -->
                   
                    <table>


                      <tr>
                        <th v-for="item in title"><div style="width:500px">{{item}}</div> </th>
                      </tr>
                      <tr v-for="item in arr" :key='item'>
                        <td>{{item.name}}</td>
                        <td>{{item.sort}}</td>
                        <td>{{item.company}}</td>
                      </tr>
                    </table>
                 
                </div>

here is My Vue:

        el: "#app",
        data: {
          wd: '', 
          arr: [], 
          listIndex: -1, 
          title:['name','sort','company'],
        },
        methods: {
          
          keyup(event) {

            var url = "/search/search/"
            axios.get(url, {
              params: {
                q: this.wd,
              }
            }).then(res => {
              console.log(res);
              
              this.arr = res.data.list; 
              
            
             
            })
            
          }

        }
      })
      ;

I know the data was got.Because the number of the items in loop is exactly correct.When I console.log(res.data.list),I can view the data from the backend.But they can't display in my page. I will be very appreciate it if you could help me.Thank you! enter image description here

Answer 1

I think the problem is in your reference to this.arr in your callback. When the AJAX call returns, this is scoped to the response, not your Vue object.

You can overcome this by inserting a variable prior to the AJAX call, like this:

var vm = this;
axios.get(url, {

then, in the callback, instead of this.arr = res.data.list; , do this:

vm.arr = res.data.list;

Answer 2

The field data must be reactive

data() {
  return{
   wd: '', 
   arr: [], 
   listIndex: -1, 
   title:['name','sort','company'],
 }
}