如何在数据更新时让vuejs2刷新模板

Question

我有一个组件，我希望用它来搜索数据库中的成员。该页面目前非常简单，一个包含少量搜索参数的表单和一个触发对服务器的AJAX调用的按钮，该按钮将返回与搜索条件匹配的JSON成员列表。

但是，每当我更新数据时，模板都不会显示搜索结果。如果我将搜索结果硬编码到数据中，它会很好地显示记录。

有没有办法触发组件中模板的刷新，或者如果我采取错误的方法，你能指出我正确的方向吗？

const MemberSearchScreen = {
  template: `
    <div>
        <form id="membersearchform" class="pure-form">
            <input type="text" name="memberid" pattern="[0-9]" placeholder="memberid" v-model="searchcriteria.memberid"/>
            <input type="text" name="surname" placeholder="Surname" v-model="searchcriteria.surname"/>
            <input type="text" name="addressline1" placeholder="Addressline1" v-model="searchcriteria.addressline1"/>
            <input type="text" name="county" placeholder="County" v-model="searchcriteria.country"/>
            <input type="text" name="postcode" placeholder="Postcode" v-model="searchcriteria.postcode"/>
            <button class="pure-button pure-button-primary" v-on:click="submitsearch">Search</button>
        </form>
        <div id="membersearchresults">
            <table class="pure-table">
                <thead>
                    <tr>
                        <th>MemberID</th>
                        <th>Name</th>
                        <th>Address</th>
                        <th>County</th>
                        <th>Postcode</th>
                        <th>Home Phone</th>
                        <th>Mobile Phone</th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="searchresult in searchresults">
                        <td>{{searchresult.memberid}}</td>
                        <td>{{searchresult.title + ' ' + searchresult.forename + ' ' + searchresult.surname}}</td>
                        <td>{{searchresult.addressline1}}</td>
                        <td>{{searchresult.county}}</td>
                        <td>{{searchresult.postcode}}</td>
                        <td>{{searchresult.homephone}}</td>
                        <td>{{searchresult.mobilephone}}</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>

  `,

  data: function () {
        return {
                searchcriteria: {
                          memberid:'',
                          surname:'',
                          addressline1:'',
                          country:'',
                          postcode:''
                        },
                searchresults :[]
        }
  },

  methods: {
            submitsearch: function(){
                    axios.post('/members/search/',
                               JSON.stringify(this.searchcriteria),
                        {
                          headers: {
                                      'Content-type': 'application/json',
                                      'Accept': 'application/json',
                                      'X-CSRF-TOKEN': document.querySelector('#csrftoken').getAttribute('content')
                                    }
                        }
                              )
                         .then(function (response) {
                                                    this.searchresults = response.data;
                                                    })
                         .catch(function (error) {
                                                  console.log(error);
                                                });
            }

          }

};