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