Question

我正在尝试为Vue中的数组创建反应式过滤器。我的起始数组来自一个API调用，该调用返回this.features（geojson功能）。我正在对嵌套数组进行过滤。这行得通-但是当我输入搜索词然后退格回空字符串并输入另一个字符串时，我不是在过滤原始数组，而是在过滤已经过滤的数组。如何通过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()）。谢谢你的想法。

Answer 1

您的计算属性正在使docker run --rm发生突变，这是一个非诺。计算属性应该是只读的。

feature.properties.site_observations

Answer 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')
    )

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

Answer 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)
    }

我会覆盖Vue中的计算属性过滤器吗？

3 个答案: