在 DOM Vue 中推送不更新数组答案

【问题标题】：Push not updating array in DOM Vue在 DOM Vue 中推送不更新数组
【发布时间】：2019-08-04 08:35:38
【问题描述】：

我正在使用 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);
        });
      });
  }
}

我不知道我在哪里做错了。如果可能，请帮忙。

【问题讨论】：

你能告诉我你的回答吗？
在 UI 中，我什么也没得到。在开发工具中，更新后我输入“salt”：availSearchData:Array[1] 0:Object coid:4 name:"SALTS AND SUGAR" subcatid:"1"
只是 console.log(res) 并在此处显示输出

标签： vue.js dom axios

【解决方案1】：

要将一个项目添加到数组的后面并使其在 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() 函数中声明。

【讨论】：

【解决方案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);
    });
  }
}

【讨论】：

这非常有效，但我得到了这个错误 Computed property "availSearch" was assigned to but it has no setter。
不要使用“availSearch”设置值。这只是为了读取值。
我没有使用“availSearch”设置
那么请提供您的代码，以便我检查您的使用情况
当数组中只有一个元素时。它在 UI 中什么也不显示

【解决方案3】：

尝试从mounted 挂钩调用您的函数。我认为问题在于您试图在 DOM 尚未呈现时显示数据。通过在 mounted 中调用您的函数，您可以在 DOM 渲染后取回数据。

mounted() {
     this.searching();
          }

from Vue website "mounted: 在实例挂载后调用，其中 el 被新创建的 vm.$el 替换。如果根实例被挂载到文档内元素，vm.$el 也会调用挂载时在文档中。”

【讨论】：

这行得通，它确实显示了数据..但是当数组中只有一个元素时。它什么也没显示
更改:key="name"。如果mounted 工作，那么问题可能是使用索引作为键
我不能，它包含重复数据

【解决方案4】：

对此的可能解释是：

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

【讨论】：