如果搜索字符串与任何值 Vue JS 匹配，如何返回 JSON 对象

Question

我有这种对象

[
{
camera_ids: "all",
camera_ids_failed: "failed",
inserted_at: "Monday, 25 Feb 2019 6:00 AM",
recipients: "[e-mail]",
subject: "Your Scheduled SnapMail @ 10:59"
},
{
camera_ids: "all",
camera_ids_failed: "failed",
inserted_at: "Monday, 25 Feb 2019 6:06 AM",
recipients: "[e-mail]",
subject: "Your Scheduled SnapMail @ 11:05"
}
]

我正在尝试在 Vue 中对这个对象进行搜索过滤器，这个对象被设计为 Vue 组件的数据部分中的data: []。

我正在尝试做的是根据搜索查询更改this.data的值。例如，如果我的搜索字符串是jun那么我只得到一个包含jun的对象，我想检查这个搜索字符串到每个对象的键和值。

我试过这个。

onFilterSet (filters) {
const oldData = this.data
let search = filters.search
if (search != null || search != "") {
this.data = this.data.filter((item) => {
return _.includes(item.recipients, search) || _.includes(item.camera_ids, search) || _.includes(item.camera_ids_failed, search) || _.includes(item.subject, search);
});
} else {
this.data = oldData
}
},

但这行不通。 当搜索查询再次为空时，this.data值不会更改也不会返回到旧状态。请指导我。

更新：

我正在搜索任何东西，一个例子是：搜索字符串是：jun，我想根据camera_ids、camera_ids_failed、收件人、主题进行检查，如果这些键的任何值与jun匹配，它应该过滤对象并返回它。

如果第一个对象如下所示

[
{
camera_ids: "all",
camera_ids_failed: "failed",
inserted_at: "Monday, 25 Feb 2019 6:00 AM",
recipients: "[e-mail]",
subject: "Your Scheduled SnapMail @ 10:59"
},
{
camera_ids: "all",
camera_ids_failed: "failed",
inserted_at: "Monday, 25 Feb 2019 6:06 AM",
recipients: "[e-mail]",
subject: "Your Scheduled SnapMail @ 11:05"
},
{
camera_ids: "all",
camera_ids_failed: "failed",
inserted_at: "Monday, 25 Feb 2019 6:06 AM",
recipients: "[e-mail]",
subject: "Your Scheduled Junaid @ 11:05"
},
{
camera_ids: "all",
camera_ids_failed: "failed",
inserted_at: "Monday, 25 Feb 2019 6:06 AM",
recipients: "[e-mail]",
subject: "Your Scheduled SnapMail @ 11:05"
}
]

并且搜索值为jun

过滤器后更新的对象将是

[
{
camera_ids: "all",
camera_ids_failed: "failed",
inserted_at: "Monday, 25 Feb 2019 6:00 AM",
recipients: "[e-mail]",
subject: "Your Scheduled SnapMail @ 10:59"
},
{
camera_ids: "all",
camera_ids_failed: "failed",
inserted_at: "Monday, 25 Feb 2019 6:06 AM",
recipients: "[e-mail]",
subject: "Your Scheduled Junaid @ 11:05"
}
]

Answer 1

试试这个：

const data = [{
camera_ids: "all",
camera_ids_failed: "failed",
inserted_at: "Monday, 25 Feb 2019 6:00 AM",
recipients: "[e-mail]",
subject: "Your Scheduled SnapMail @ 10:59"
},
{
camera_ids: "all",
camera_ids_failed: "failed",
inserted_at: "Monday, 25 Feb 2019 6:06 AM",
recipients: "[e-mail]",
subject: "Your Scheduled SnapMail @ 11:05"
}
]
new Vue({
el: '#app',
data() {
return {
data,
filtered: data,
term: ''
}
},
watch: {
term(val) {
this.filtered = this.data.filter(d => {
for (let name in d) {
if (d[name].toLowerCase().indexOf(val.toLowerCase()) > -1) {
return d;
}
}
})
}
}
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<input type="text" v-model="term" />
<pre>{{ filtered }}</pre>
</div>

Answer 2

您可能希望使用reduce函数，并在其回调中使用for..in来迭代对象。然后使用 include 检查键的值是否包含字符串，然后将此对象推送到累加器数组。

此演示不包括大小写，因此请根据区分大小写进行修改。

let data = [{
camera_ids: "all",
camera_ids_failed: "failed",
inserted_at: "Monday, 25 Feb 2019 6:00 AM",
recipients: "[e-mail]",
subject: "Your Scheduled SnapMail @ 10:59 ,Test for jun"
},
{
camera_ids: "all",
camera_ids_failed: "failed",
inserted_at: "Monday, 25 Feb 2019 6:06 AM",
recipients: "[e-mail]",
subject: "Your Scheduled SnapMail @ 11:05"
}
]
function findObj(str) {
return data.reduce(function(acc, curr) {
for (let keys in curr) {
if (curr[keys].includes(str)) {
acc.push(curr)
}
}
return acc;
}, [])
}
console.log(findObj('jun'))

Answer 3

如果用新值覆盖data，则会丢失任何被过滤掉的内容。

您想要的是表示筛选的数据集的计算属性。这只会计算data或search值是否发生变化，这使得它非常有效。

例如

data () {
return {
search: '',
data: [/* your array here */]
}
},
computed: {
filtered () {
if (!this.search) {
// empty search, return all values
return this.data
}
let normalizedSearch = this.search.toLowerCase()
return this.data.filter(datum => Object.values(datum).some(val => 
String(val).toLowerCase().includes(normalizedSearch)))
}
}

然后在您的模板中

<input v-model="search">
<div v-for="item in filtered">
<!-- and so on -->
</div>