Javascript Vue JS在对象上的实时搜索'；s键/值对

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

我有一个搜索输入，作为字符串绑定到

applicationmodalsearch

的模型，还有一个对象保存在

applicationmodaldata

中，带有键/值对

applicationModaldata

中的数据未知，并且最初不是在页面加载时填充的，它作为用户从

v-for

元素选择的一部分进行更新，即：用户单击按钮以在模式中预览数据，并且该

v-for

项目的索引项添加到

applicationModaldata

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

此.applicationModalData.filter不是函数

导出默认值{
数据（）{
返回{
申请者：错误，
AppliantModalData:null，
应用程序模型搜索：“”
}
},
方法：{
/*
**申请人模态数据
*/
toggleApplicantModal（申请人）{
this.applicationModalData=申请人？？空
this.applicationModalisShowed=！this.applicationModalisShowed
}
},
计算：{
/*
**筛选申请者数据以方便查找
*/
FilteredAppliantData（）{
如果（本应用程序模型研究）{
返回此.applicationModalData.filter（（项）=>{
返回此.applicationModalSearch.toLowerCase（）.split（“”）.every（v=>item.toLowerCase（）.includes（v））
})
}否则{
返回此.applicationModalData
}
}
}
}

我需要筛选并返回的示例对象可能是：

{
“_方法”：“发布”，
“蜂蜜钥匙”：“测试”，
“蜂蜜版本”：空，
“客户端用户代理字符串”：“Mozilla/5.0（iPhone；CPU iPhone OS 14_1，类似Mac OS X）AppleWebKit/605.1.15（KHTML，类似Gecko）版本/14.0 Mobile/15E148 Safari/604.1”，
“应用程序\源\ url”：https://example.com/",
“IsIframe”：“1”，
“AppFirstName”：“John”，
“AppLastName”：“Doe”
}

因此，如果我在搜索元素（

applicationmodalsearch

）中键入类似“John”的内容，我希望从我的计算属性中得到：

{
“AppFirstName”：“John”，
}

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

{
“AppLastName”：“Doe”
}

我的代码中缺少了什么

更新 因此，实施后：

filteredApplicantData（）{
如果（本应用程序模型研究）{
返回Object.fromEntries(
Object.entries（this.applicationModalData）.filter（（[key，value]）=>{
如果（值==null）值='null'
返回此项。AppliantModalSearch
.tolocalLowercase（）
.拆分（“”）
.每(
（字）=>
key.toLocaleLowerCase（）.includes（word）||
value.toLocaleLowerCase（）.includes（word）
);
})
);
}
返回此.applicationModalData；
},

添加更多数据时，奇怪的是，代码将失败，只能访问列表中的

client\u user\u agent\u string

（我添加了更多数据）

物体里有没有奇怪的角色

最后更新 结果表明，解析并完成作为

对象一部分的函数需要以下内容。条目

部分：

---

if（value==null）value='null'

我按照您的逻辑比较了这些值，但将它们应用于键和值。我用你给出的例子测试了它

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]返回。这允许我们对该数组进行迭代/筛选，并使用相反的方法重构对象。fromEntries

看起来不错，只是我在区域设置部分遇到了一个错误：“无法读取null的属性'toLocaleLowerCase'，您是否缺少一个括号？我想最后缺少了一个括号，我再次粘贴了代码，以获取null的错误

无法读取属性'toLocaleLowerCase'，当我在控制台中单击错误时，它会突出显示行
（word）=>
-我已检查
应用程序模型搜索
是否有值，在运行代码之前，
applicationModaldata
包含一个对象，但确实缺少了一些东西？我用代码制作了一个沙盒：将“toLocaleLowerCase”更改为“toLowerCase”也许，我认为自动完成在更新时将“Locale”添加到了我的代码中。。。听起来你遇到了典型的反应性问题：@Terry谢谢Terry，所以客户端用户代理字符串中没有什么奇怪的东西导致它断裂？如何解决此问题？如果要向
此.applicationModalData
添加新的键值对，请使用
Vue.set
：
Vue.set
不作为Nuxt JS应用程序的一部分提供。此外，在搜索时，所有99个键/值对都在
applicationModalData
中可用，但它只会进入第四项，即客户端用户代理字符串，为什么会在这一点失败？