关于javascript：Vue.js错误的变量得到更新


Vue.js wrong variable gets updated

我有一个过滤方法(itemswithfilter)来过滤我的items对象并将结果写入itemsresult。

这是第一次工作，但似乎我的函数也自动更新了items对象。即使如此，我也只将结果写在itemsresult中。

有人知道我为什么以及如何预防它吗？该itemswithfilter方法只将结果返回到itemsresult

下面是fiddle链接：https://jsfiddle.net/afdz3ylt/1/

这是我的项目筛选功能

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
itemsWithFilter: function(filter) {

  var items = this.items.data;
  var result = {}


  console.log("Run itemsWithFilter")
  Object.keys(items).forEach(key => {

    const item = items[key]

    console.log(`filter: ${filter}: check item ${item.id} with category id: ${item.category.id}`)

    if (item.category.id == filter) {
      result[key] = item
    }
  })

  this.itemsResult.data = result

}

可能是我理解错误的问题，但我认为您要问的是如何使用this.items.data，并在不更新this.items.data的情况下将结果写入this.itemsResult.data。这是一个典型的JavaScript操作，其中对对象的引用始终保持不变。你要找的(如果我对这个问题的假设是正确的)是克隆this.items.data对象。最好的方法是var items = JSON.parse(JSON.stringify(this.items.data))。有关这些问题的详细信息：

如何将javascript对象复制到新变量而不是通过引用？

在javascript中深度克隆对象最有效的方法是什么？.

相关讨论