Question

在清除/删除搜索栏中的查询后，如何将对我的响应重置为NULL？

我已经通过v-show和查询长度模糊地实现了这一点，但是我知道它并不是真的正确，因为它隐藏了结果，实际上没有从DOM中清除它们。我也尝试将ELSE语句与查询方法绑定在一起，但是没有运气。

<div class="searchBarContainer">
   <div class="search">
      <div class="searchBar">
       <form v-on:submit="queryGitHub(query)">
        <input type="search" placeholder="Search Repositories Ex. Hello 
 World" v-model="query" />
      <button type="submit" v-on:click="isHidden = 
 !isHidden">Search</button>
    </form>
  </div>

  <div class="results" id="results" v-if="response" v-show="query.length = 
 0">
    <div class="notFound" v-if="response.length == 0">
      <p>Sorry buddy, try another search!</p>
    </div>

    <div class="resultsHeadings" v-if="response.length >= 1">
      <p>Name</p>
      <p>Language</p>
    </div>

    <div class="items" v-if="response.length >= 1">
      <div class="item" v-for="(item, index) in response, filteredList" 
 v-bind:id="item.id" :key="index"> 
          <p>{{item.name}}</p>
          <p>{{item.language}}</p>

          <div class="expand">
            <a @click="pushItem(index)">
              <div class="itemButton">
                <button v-on:click="addFave(item.id, item.forks)">Add to 
 Favorites</button>
              </div>
          </div>
      </div>
    </div>
   </div>
  </div>
 </div>


 <script>

 export default{
  data () {
    return {
     query:'',
     response: null,
     items: [],
     faves: [],
     activeItems: [],
   }
  },
  methods: {
    queryGitHub(q) {
    if (q.length >= 1){
    fetch('https://api.github.com/search/repositories?q=' + q)
    .then((j) => {
      return j.json();
    })
    .then ((r) => {
    console.log(r);
    //this.response = r.items;

    this.response = r.items.slice(0, 15)
      })
    }
    }
    }
  };

我需要我的搜索输入通过将访问者清除输入后将其重置为NULL来删除响应。目前，如果您清除输入，结果会消失，这很好，但是如果再次键入，结果将重新出现。因此它们是隐藏的，不会被删除。我相信我需要一个函数，可能是通过计算的，以便在清除输入后将数据中的响应设置为null。

Answer 1

您可以将input事件处理程序附加到input元素上，并在其中检查query字符串的长度。如果为零，则将response设置为null。

<input type="search" placeholder="Search Repositories Ex. Hello 
 World" v-model="query" @input="onQueryChange" />

onQueryChange函数应该放在methods下，而不是computed下，因为它不返回任何派生数据。

methods: {
  onQueryChange(event) {

    // can be this.query.length === 0 as well
    if(event.target.value.trim().length === 0) {
      this.response = null;
    }

  }
}

清除搜索输入后，将响应重置为null Vue.js

1 个答案: