时间戳

首页 > 解决方案 > 我是否在 Vue 中覆盖了计算属性过滤器？

vue.js - 我是否在 Vue 中覆盖了计算属性过滤器？

问题描述

我正在尝试为 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 过滤对象属性，但我无法使该代码工作（它使用Object.assign()）。感谢您的任何想法。

标签： vue.jsfilter

解决方案

您的计算属性是 mutating 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
}

推荐阅读