Push не обновляющий массив в DOM Vue

Question

Я использую Vue и пытаюсь сделать живой поиск.Но при обновлении содержимого поиска оно не обновляется.

Данные получают обновление в массиве, если проверено в инструментах разработки.Но DOM не обновляется.

шаблон

<div class="dropdown">
    <input type="text" v-model="input" placeholder="Search" @keyup="searching" data-toggle="dropdown">
    <span class="caret"></span>
    <ul class="dropdown-menu">
      <li v-for="(data,index) in availSearchData" :key="index">
        <a href="#">{{data.name}}</a>
      </li>
    </ul>
  </div>

метод

searching() {
  if (this.input) {
    let url = this.domain + "search";
    axios
      .get(url, {
        params: {
          table: this.table,
          data: this.input
        }
      })
      .then(res => {
        this.availSearchData = [];
        res.data.forEach(doc => {
          this.availSearchData.push(doc);
        });
      });
  }
}

Я незнаю, где я делаю не так.Пожалуйста, помогите, если это возможно.

Answer 1

Используйте вычисляемое свойство в вашем компоненте и используйте его для разбора шаблона следующим образом

<li v-for="(data,index) in availSearch" :key="index">
  <a href="#">{{data.name}}</a>
</li>

и вычисленное свойство будет тогда

availSearch() {
  return this.availSearchData;
},

, так что это вычисленное свойство всегда возвращает массив, если он обновлен.

Также, если ваш ответ - это массив, который вы хотите использовать точно, попробуйте это

searching() {
  if (this.input) {
    let url = this.domain + "search";
    axios
    .get(url, {
      params: {
        table: this.table,
        data: this.input
      }
    })
    .then(res => {
      this.availSearchData = [];
      Vue.set(this, 'availSearchData', res.data);
    });
  }
}

Answer 2

Возможные объяснения этому могут быть:

• Вы не объявляете свойство в компоненте, и поэтому нормальная реактивность не работает.
• Вы используете индекс в качествевведите ваш массив.Это может сбить с толку систему реактивности, поэтому не обязательно знать, изменился ли пункт
  .Попробуйте вместо этого использовать имя элемента в качестве ключа.

Answer 3

Попробуйте вызвать вашу функцию из mounted hook.Я думаю, проблема в том, что вы пытаетесь показать данные, когда DOM еще не визуализирован.Вызвав вашу функцию в mounted, вы получите данные обратно после рендеринга DOM.

mounted() {
     this.searching();
          }

из Vue website"mount: Вызывается после монтирования экземпляра, где elзаменен вновь созданным vm. $ el. Если корневой экземпляр смонтирован в элементе документа, vm. $ el также будет в документе при вызове смонтированного. "