Vue JS 实时搜索对象的键/值对

Question

我正在使用 Vue JS 2 作为我的 Nuxt JS 项目的一部分来构建一个实时搜索过滤器，用户可以开始输入并根据他们输入的内容匹配结果。

我有一个搜索输入，以字符串的形式绑定到 applicantModalSearch 的模型，并在 applicantModalData 中保存了一个带有键/值对的对象。

applicantModalData 内部的数据是未知的，并且最初不会在页面加载时填充，它是作为用户从 v-for 元素中选择的一部分进行更新的，即：用户单击按钮以在模式中预览数据，并且该v-for 项的索引项被添加到applicantModalData

我希望能够动态搜索键和值，而不仅仅是值并返回结果，现在我的错误是：

this.applicantModalData.filter 不是函数

export default {
  data () {
    return {
      applicantModalIsShown: false,
      applicantModalData: null,
      applicantModalSearch: ''
    }
  },
  methods: {

    /*
    ** Applicant modal data
    */
    toggleApplicantModal (applicant) {
      this.applicantModalData = applicant ?? null
      this.applicantModalIsShown = !this.applicantModalIsShown
    }

  },
  computed: {

    /*
    ** Filter applicant data for ease
    */
    filteredApplicantData () {
      if (this.applicantModalSearch) {
        return this.applicantModalData.filter((item) => {
          return this.applicantModalSearch.toLowerCase().split(' ').every(v => item.toLowerCase().includes(v))
        })
      } else {
        return this.applicantModalData
      }
    }

  }
}

我需要过滤和返回的示例对象可能是：

{
  "_method": "POST",
  "honey_key": "test",
  "honey_version": null,
  "client_user_agent_string": "Mozilla/5.0 (iPhone; CPU iPhone OS 14_1 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/14.0 Mobile/15E148 Safari/604.1",
  "application_source_url": "https://example.com/",
  "IsIframe": "1",
  "AppFirstName": "John",
  "AppLastName": "Doe"
}

因此，如果我在搜索元素 (applicantModalSearch) 中输入类似“John”的内容，我希望从我的计算属性中得到：

{
  "AppFirstName": "John",
}

或者如果我在搜索元素中输入“姓氏”，我希望看到：

{
  "AppLastName": "Doe"
}

我的代码中缺少什么？

更新

所以实施后：

filteredApplicantData() {
  if (this.applicantModalSearch) {
    return Object.fromEntries(
      Object.entries(this.applicantModalData).filter(([key, value]) => {
        if (value == null) value = 'null'
        return this.applicantModalSearch
          .toLocaleLowerCase()
          .split(" ")
          .every(
            (word) =>
              key.toLocaleLowerCase().includes(word) ||
              value.toLocaleLowerCase().includes(word)
          );
      })
    );
  }
  return this.applicantModalData;
},

并添加更多数据，奇怪的是代码会失败并且只会到达列表中的client_user_agent_string（我添加了更多数据）

对象中可能有奇怪的字符吗？

最终更新

原来需要以下内容来解析和完成作为Object.entries部分的一部分的功能：

if (value == null) value = 'null'

Answer 1

我按照您的逻辑比较值，但将它们应用于键和值。我在您提供的示例上对其进行了测试。

computed: {
    filteredApplicantData() {
      if (this.applicantModalSearch) {
        return Object.fromEntries(
          Object.entries(this.applicantModalData).filter(([key, value]) => {
            return this.applicantModalSearch
              .toLocaleLowerCase()
              .split(" ")
              .every(
                (word) =>
                  key.toLocaleLowerCase().includes(word) ||
                  value.toLocaleLowerCase().includes(word)
              );
          })
        );
      }
      return this.applicantModalData;
    },
  },

一些解释：Object.entries 将给定对象的键值对数组作为数组 [key, value] 返回。这允许我们在该数组上进行迭代/过滤，并使用相反的方法Object.fromEntries 重构对象。