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

尝试从mounted钩子调用函数。我认为问题在于您正在尝试在尚未呈现DOM时显示数据。通过在mounted中调用函数，可以在呈现DOM之后获取数据。

mounted() {
     this.searching();
          }

from Vue website“已挂载：在实例挂载后调用，其中el由新创建的vm。$ el替换。如果根实例已挂载到文档内元素，则vm。$ el挂载时也将在文档中。”

Answer 2

在您的组件中使用计算所得的属性，并使用该属性来解析模板

<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 3

对此的可能解释可能是：

您没有在组件中声明属性，因此很正常反应性不起作用。
您正在使用index作为数组中的键。这可能会使反应性系统，因此它不一定知道项目是否
改变了。尝试使用项目名称作为关键字。

Answer 4

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

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

this.$set 是 Vue 的内置数组操作函数，可保证反应性。 this.items 是数组，this.items.length（注意：它是 items.length NOT items.length - 1）是将新索引推送到数组的后面，最后，{{1 }} 是在推入数组之前将 JSON.parse(JSON.stringify(this.item)) 克隆到一个新对象中。克隆部分可能不适用于您，我在变量中使用了 this.item，因为所有变量都在我的 this 函数中声明。

推送不更新DOM Vue中的数组

4 个答案: