Question

我有这种东西

[
 {
   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，如果这些键的值中的任何一个与jun相匹配，我想针对camera_id，camera_ids_failed，收件人，主题进行检查，它应该过滤对象并返回它。

如果第一个对象看起来像这样

[
 {
   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"
  }
]

Answer 1

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

此演示不包含大小写，因此请根据大小写区分。

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'))

Answer 2

尝试一下：

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>

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>

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

3 个答案: