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

【问题标题】：how to return JSON object if search string matches with any value Vue JS如果搜索字符串与任何值Vue JS匹配，如何返回JSON对象
【发布时间】：2019-02-26 05:33:28
【问题描述】：

我有这种东西

[
 {
   camera_ids: "all",
   camera_ids_failed: "failed",
   inserted_at: "Monday, 25 Feb 2019 6:00 AM",
   recipients: "junaid@evercam.io",
   subject: "Your Scheduled SnapMail @ 10:59"
 },
 {
   camera_ids: "all",
   camera_ids_failed: "failed",
   inserted_at: "Monday, 25 Feb 2019 6:06 AM",
   recipients: "musaa@evercam.io",
   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: "junaid@evercam.io",
   subject: "Your Scheduled SnapMail @ 10:59"
 },
 {
   camera_ids: "all",
   camera_ids_failed: "failed",
   inserted_at: "Monday, 25 Feb 2019 6:06 AM",
   recipients: "musaa@evercam.io",
   subject: "Your Scheduled SnapMail @ 11:05"
  },
  {
   camera_ids: "all",
   camera_ids_failed: "failed",
   inserted_at: "Monday, 25 Feb 2019 6:06 AM",
   recipients: "hibaa@evercam.io",
   subject: "Your Scheduled Junaid @ 11:05"
  },
  {
   camera_ids: "all",
   camera_ids_failed: "failed",
   inserted_at: "Monday, 25 Feb 2019 6:06 AM",
   recipients: "hajraa@evercam.io",
   subject: "Your Scheduled SnapMail @ 11:05"
  }
]

搜索值为jun

过滤后更新的对象将是

[
 {
   camera_ids: "all",
   camera_ids_failed: "failed",
   inserted_at: "Monday, 25 Feb 2019 6:00 AM",
   recipients: "junaid@evercam.io",
   subject: "Your Scheduled SnapMail @ 10:59"
 },
  {
   camera_ids: "all",
   camera_ids_failed: "failed",
   inserted_at: "Monday, 25 Feb 2019 6:06 AM",
   recipients: "hibaa@evercam.io",
   subject: "Your Scheduled Junaid @ 11:05"
  }
]

【问题讨论】：

您在 json 中搜索的值
我想我已经说得很清楚了，现在我再次更新了它
用户可以添加的任何值。如果匹配，它只是对象的键的任何值，任何键的值匹配它应该在下一个更新的对象中
您确定要与键匹配吗？例如，如果我输入 "camera"，应该返回所有结果？
“键的值。不是键” ????也称为 "values" ;)

标签： javascript vue.js

【解决方案1】：

试试这个：

const data = [{
    camera_ids: "all",
    camera_ids_failed: "failed",
    inserted_at: "Monday, 25 Feb 2019 6:00 AM",
    recipients: "junaid@evercam.io",
    subject: "Your Scheduled SnapMail @ 10:59"
  },
  {
    camera_ids: "all",
    camera_ids_failed: "failed",
    inserted_at: "Monday, 25 Feb 2019 6:06 AM",
    recipients: "musaa@evercam.io",
    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>

【讨论】：

如果值为整数，有时也会失败。 :)
@JunaidFarooq 然后在比较之前先将所有内容转换为字符串，例如(d[name] + '').toLowerCase().indexOf(...)。

【解决方案2】：

您可能喜欢使用reduce 函数并在其回调中使用for..in 来迭代对象。然后使用includes检查key的值是否包含字符串，然后将这个对象push到累加器数组中。

本演示不包含大小写，请根据大小写进行修改。

let data = [{
    camera_ids: "all",
    camera_ids_failed: "failed",
    inserted_at: "Monday, 25 Feb 2019 6:00 AM",
    recipients: "junaid@evercam.io",
    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: "musaa@evercam.io",
    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'))

【讨论】：

【解决方案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>

【讨论】：