vue.js - 在 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

要将一个项目添加到数组的后面并使其在 Vue 中具有反应性，以下是对我有用的方法:

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

this.$set是 Vue 的内置数组操作函数，可保证 react 性。this.items是数组，this.items.length (注意:它是 items.length 而不是 items.length - 1 )是将新索引推到数组的后面，最后是 JSON.parse(JSON.stringify(this.item))就是克隆this.item在插入数组之前先将其放入新对象中。克隆部分可能不适用于你我用过的this在变量中，因为所有变量都在我的 data() 中声明功能。