我是否在 Vue 中覆盖了计算属性过滤器？答案

【问题标题】：Am I overwriting computed property filter in Vue?我是否在 Vue 中覆盖了计算属性过滤器？
【发布时间】：2020-07-18 23:04:23
【问题描述】：

我正在尝试为 Vue 中的数组创建一个反应式过滤器。我的起始数组来自一个返回 this.features（geojson 功能）的 API 调用。我正在对嵌套数组进行过滤。这行得通——但是当我输入一个搜索词然后退格回到一个空字符串并输入另一个字符串时，我没有过滤原始数组，但似乎正在过滤已经过滤的数组。如何从 API 调用中再次过滤原始数组？

计算属性：

filteredFeatures() {
  if (this.searchTerm == '') {
    return this.features
  }
  // filter on nested array
  let filtered = this.features.filter(feature => {
    feature.properties.site_observations = feature.properties.site_observations.filter(
      el => JSON.stringify(el).match(this.searchTerm, 'i')
    )
    return feature.properties.site_observations.length > 0
  })
  return filtered
}

我查看了Vue filtering objects property，但我无法使该代码工作（它使用Object.assign()）。感谢您的任何想法。

【问题讨论】：

我看到了，但我认为问题出在：feature.properties.site_observations = feature.properties.site_observations.filter( el => JSON.stringify(el).match(this .searchTerm, 'i')

标签： vue.js filter

【解决方案1】：

您的计算属性正在变异feature.properties.site_observations，这是一个诺诺。计算属性应该是只读的。

filteredFeatures() {
  if (this.searchTerm == '') {
    return this.features
  }
  // filter on nested array
  let filtered = this.features.filter(feature => {
    const site_observations = feature.properties.site_observations.filter(
      el => JSON.stringify(el).match(this.searchTerm, 'i')
    )
    return site_observations.length > 0
  })
  return filtered
}

【讨论】：

谢谢，成功了！我很难将一堆嵌套数组想象成可以过滤的变量 (site_observations)。

【解决方案2】：

看来这是你的问题：

 feature.properties.site_observations = feature.properties.site_observations.filter(
      el => JSON.stringify(el).match(this.searchTerm, 'i')
    )

因为此代码过滤功能并更改 feature.properties.site_observations 的属性。然后，在下一次读取中，值改变。我们说你的函数不是纯粹的，因为它改变了特征的状态。

所以，你应该做的是：

 let anotherVariable = feature.properties.site_observations.filter(
      el => JSON.stringify(el).match(this.searchTerm, 'i')
    )

因此，在函数上，避免改变对象的状态，这会导致错误。

【讨论】：

【解决方案3】：

在进一步检查中，上述答案返回所有 site_observations，而不仅仅是与搜索匹配的那些。下面是一个更好的解决方案，使用 map 避免覆盖数据，使用对象扩展运算符执行对象分配，并向下钻取嵌套对象，如下所示：

filteredFeatures() {
      return this.features
        .map(feature => ({
          ...feature,
          properties: {
            site_observations: feature.properties.site_observations.filter(
              element => {
                return JSON.stringify(element).match(new RegExp(this.search, 'i'))
              }
            )
          }
        }))
        .filter(feature => feature.properties.site_observations.length)
    }

【讨论】：