Блог

Я использую 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);
        });
      });
  }
}
  

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

Чтобы добавить элемент в конец массива и заставить его реагировать в Vue, ниже приведено то, что сработало для меня:

 this.$set(this.items, 
          this.items.length, 
          JSON.parse(JSON.stringify(this.item))
         );
  

this.$set Это встроенная функция управления массивом Vue, которая гарантирует реактивность.
this.items Это массив, this.items.length (ПРИМЕЧАНИЕ: это items.length НЕ items.length - 1 является) заключается в том, чтобы поместить новый индекс в конец массива и, наконец, JSON.parse(JSON.stringify(this.item)) клонировать this.item в новый объект перед отправкой в массив. Часть клонирования может быть неприменима к вам, и я использовал this в переменных, потому что все переменные объявлены в моей data() функции.

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

 <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);
    });
  }
}
  

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

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

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

 mounted() {
    this.searching();
}
  

с веб-сайта Vue «смонтировано»: вызывается после монтирования экземпляра, где el заменяется на вновь созданную виртуальную машину.$el. Если корневой экземпляр смонтирован к элементу in-document, vm.$el также будет в документе при вызове mounted.»