vue js如何即时搜索结果为空

Question

请查看我的代码，我不确定自己在做什么错？当搜索输入为空时，它将显示db中的所有数据如何修复，vue长度不起作用？

  var app = new Vue({
    el: '#newsearch',
    data: {
      qry: '',
      bUrl: 'http://localhost:8000',
      results: [],
    },
    methods: {
      autoComplete(){
        this.results=[];
        axios.post(this.bUrl + '/search', {
          qry: this.qry
        })
      .then ( (response) => {
        app.results = response.data;
      })
      }
    }
  });

  

html

<p class="control is-expanded has-icons-right">
    <input class="input" v-model="qry" v-on:Keyup="autoComplete" type="text" placeholder=">.<"/>
  </p>
  <p class="control">
    <a class="button is-dark">
      <i class="fa fa-search"></i>
    </a>
  </p>
  <div v-show="results.length">
    <p v-for="result in results">
      @{{result.anime_name}}
    </p>
  </div>
</div>

Answer 1

仅当qry不为空时才发送axios请求。

methods: {
  autoComplete(){
    this.results=[];
    if(this.qry !== '') {
       axios
          .post(this.bUrl + '/search', {
             qry: this.qry
           })
          .then ( (response) => {
             app.results = response.data;
          })
    }
  }
}