如何使用Vue 2实现JSON数据的全字段过滤功能？

JavaScript 原生不支持 post.*.includes() 这类通配符匹配写法，但是可以通过遍历单条数据所有属性值的方式，实现完全一致的全字段匹配效果。

核心实现逻辑 #

替换原有计算属性里固定匹配title字段的逻辑，通过Object.values()获取单条post所有字段的值，再用Array.some()判断任意字段命中关键词即可。
同时补全原有代码的边界兜底：解决接口数据未加载时posts为null调用filter报错的问题，增加大小写不敏感、多类型值兼容处理。

computed: {
  searchBook() {
    // 无搜索词或数据未加载时兜底返回，避免JS报错
    if (!this.mySearch || !Array.isArray(this.posts)) return this.posts || []
    const keyword = this.mySearch.toLowerCase()
    return this.posts.filter(post => {
      // 遍历当前数据所有字段值，任意字段匹配关键词则保留该条数据
      return Object.values(post).some(fieldVal => {
        return String(fieldVal).toLowerCase().includes(keyword)
      })
    })
  }
}

嵌套JSON结构适配 #

如果你的JSON数据存在多层嵌套对象（比如post下嵌套author对象，需要匹配author.name这类深层字段），可以增加递归方法遍历所有层级的属性值：

methods: {
  fetchData() {
    // 原有接口请求逻辑保留
    var xhr = new XMLHttpRequest()
    var self = this
    xhr.open('GET', 'jsonfile.json')
    xhr.onload = function () {
      self.posts = JSON.parse(xhr.responseText)
    }
    xhr.send()
  },
  // 递归获取对象所有层级的基础类型值
  getAllFieldValues(obj) {
    const valueList = []
    for (const val of Object.values(obj)) {
      if (typeof val === 'object' && val !== null) {
        valueList.push(...this.getAllFieldValues(val))
      } else {
        valueList.push(val)
      }
    }
    return valueList
  }
},
computed: {
  searchBook() {
    if (!this.mySearch || !Array.isArray(this.posts)) return this.posts || []
    const keyword = this.mySearch.toLowerCase()
    return this.posts.filter(post => {
      return this.getAllFieldValues(post).some(fieldVal => {
        return String(fieldVal).toLowerCase().includes(keyword)
      })
    })
  }
}

模板优化建议 #

原有模板存在两处小问题可以修正：

• input的type属性误写为input，修正为标准值text
• v-for循环缺少:key绑定，会触发Vue性能警告
  修正后模板代码：

<div id="app">    
  <input type="text" id="txt-search" v-model="mySearch" placeholder="输入关键词全字段搜索">
  <select>
    <option 
      v-for="post in searchBook"
      :key="post.id"
      :value="post.id"
    >
      {{post.id}}
    </option>
  </select>
</div>

内容的提问来源于stack exchange，提问作者JessciaLau