Vue 2组件搜索功能实现咨询：基于JSON生成的Pools组件

嘿，这事儿其实没那么复杂，我一步步给你拆解怎么用计算属性实现这个搜索功能～

第一步：确保JSON数据已加载到Vue实例中 #

首先你得把JSON文件里的Pools数据存到Vue的data里，这样后续才能对它做过滤。比如在组件的mounted钩子中加载数据：

export default {
  data() {
    return {
      pools: [], // 存储所有从JSON加载的Pools数据
      searchKeyword: '' // 绑定搜索栏的关键词
    }
  },
  mounted() {
    // 两种常见的JSON加载方式选一种就行：
    // 方式1：用import（适合静态JSON文件放在项目里）
    import('./assets/pools.json').then(jsonData => {
      this.pools = jsonData.default
    })

    // 方式2：用fetch（如果JSON是从后端接口获取的）
    // fetch('/api/pools')
    //   .then(response => response.json())
    //   .then(jsonData => {
    //     this.pools = jsonData
    //   })
  }
}

第二步：用计算属性实现实时过滤 #

这是核心部分！计算属性会自动根据searchKeyword的变化，实时返回过滤后的Pools数据。我们要检查每个Pool的Name和tag字段是否包含搜索关键词（做个大小写不敏感处理，提升用户体验）：

computed: {
  filteredPools() {
    // 如果搜索关键词为空，直接返回所有Pools
    if (!this.searchKeyword.trim()) {
      return this.pools
    }

    // 把关键词转成小写，避免大小写匹配问题
    const lowerCaseKeyword = this.searchKeyword.toLowerCase()

    // 过滤逻辑：检查Name或tag是否包含关键词
    return this.pools.filter(pool => {
      // 用可选链操作符`?.`避免字段不存在时报错（Vue2如果不支持的话，就改成`pool.Name && pool.Name.toLowerCase()`）
      const matchesName = pool.Name?.toLowerCase().includes(lowerCaseKeyword)
      const matchesTag = pool.tag?.toLowerCase().includes(lowerCaseKeyword)

      // 只要Name或tag匹配一个就保留
      return matchesName || matchesTag
    })
  }
}

第三步：绑定搜索栏并渲染过滤后的Pools #

把你的搜索栏组件和searchKeyword做双向绑定，然后用v-for渲染filteredPools里的每一项到你的Pool组件：

<template>
  <div class="search-container">
    <!-- 搜索栏：用v-model绑定searchKeyword -->
    <input
      type="text"
      v-model="searchKeyword"
      placeholder="搜索泳池名称或标签..."
      class="search-input"
    >

    <!-- 渲染过滤后的Pools组件 -->
    <Pool
      v-for="pool in filteredPools"
      :key="pool.id" <!-- 记得加唯一key，Vue列表渲染要求 -->
      :pool="pool" <!-- 把单个Pool数据传给你的Pool组件，prop名根据你的组件定义调整 -->
    />
  </div>
</template>

一些额外小提示 #

• 如果你的Pool组件没有唯一的id字段，也可以用index作为key（但不推荐，数据变动时可能有性能问题），或者找其他唯一标识字段。
• 如果需要更复杂的搜索逻辑（比如多字段精确匹配），可以在filter回调里扩展判断条件。
• 要是JSON加载慢，可以加个加载状态，避免用户看到空白页面。

这样一套下来，你的搜索功能就能正常工作啦——用户输入关键词时，计算属性会自动更新过滤结果，页面也会实时渲染符合条件的Pools组件。

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