Vue.js错误变量得到更新

时间:2017-11-04 19:23:26

标签: javascript vue.js

我有一个过滤方法( itemsWithFilter )来过滤我的项目对象并将结果写入 itemsResult

这是第一次有效,但似乎我的功能也自动更新了 items 对象。即使这样,我也只在 itemsResult 中编写结果。

有谁知道为什么以及如何阻止它? itemsWithFilter 方法仅将结果返回给 itemsResult

以下是小提琴链接: https://jsfiddle.net/afdz3yLt/1/

这是我的itemsWithFilter函数

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

}

1 个答案:

答案 0 :(得分:2)

可能是我理解错误的问题,但我认为您要问的是如何使用this.itemsResult.data并将结果写入this.items.data而不将this.items.data更新为好。这是一个典型的JavaScript事物,其中对对象的引用始终保持不变。您正在寻找的(如果我对该问题的假设是正确的)是克隆var items = JSON.parse(JSON.stringify(this.items.data))对象。最好的方法是 sample_df.set_index(['ID','date']).stack().reset_index().drop('level_2',1).rename(columns={0:'value'}) Out[559]: ID date value 0 1 1 111 1 1 1 112 2 1 1 113 3 1 2 121 4 1 2 122 5 1 2 123 6 1 3 131 7 1 3 132 8 1 3 133 9 2 1 211 10 2 1 212 11 2 1 213 12 2 2 221 13 2 2 222 14 2 2 223 15 2 3 231 16 2 3 232 17 2 3 233 18 3 1 311 19 3 1 312 20 3 1 313 21 3 2 321 22 3 2 322 23 3 2 323 24 3 3 331 25 3 3 332 26 3 3 333 。有关这些问题的更多信息:

How to copy JavaScript object to new variable NOT by reference?

What is the most efficient way to deep clone an object in JavaScript?