Сбросить ответ на null после того, как поисковый ввод очищен Vue.js - PullRequest
Новая
       18

Сбросить ответ на null после того, как поисковый ввод очищен Vue.js

0 голосов
/ 16 января 2019

Как мне сбросить мой ответ на 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, как только вход был очищен посетителем. В настоящее время, если вы очистите введенные данные, результаты исчезнут, и это здорово, но если вы наберете снова, результаты просто появятся снова. Поэтому они скрыты, а не удалены. Я считаю, что мне нужна функция, возможно, с помощью computed, чтобы вернуть ответ в данных обратно на ноль после очистки ввода.

1 Ответ

0 голосов
/ 16 января 2019

Вы можете прикрепить обработчик события 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;
    }

  }
}
...