Vue项目中如何将API返回的subjects字符串转为数组并支持过滤？

1. 预处理API数据，将subjects转为数组 #

在获取API数据后，先对每个员工的subjects字段进行拆分，转为数组格式，方便后续过滤和遍历：

<script>
export default {
  data() {
    return {
      employees: [],
      filterSubject: '' // 存储过滤的科目关键词
    }
  },
  mounted() {
    fetch('http://localhost:3000/employees')
      .then(response => response.json())
      .then(data => {
        // 把字符串格式的subjects转为数组，同时清理可能存在的空格
        this.employees = data.employees.map(emp => ({
          ...emp,
          subjects: emp.subjects.split(',').map(subj => subj.trim())
        }))
      })
  }
}
</script>

2. 用计算属性实现科目过滤 #

添加计算属性，根据输入的过滤关键词，动态筛选出包含目标科目的员工：

<script>
export default {
  // ... 上述data和mounted代码
  computed: {
    filteredEmployees() {
      // 无过滤条件时返回全部员工
      if (!this.filterSubject.trim()) return this.employees

      const target = this.filterSubject.trim().toLowerCase()
      return this.employees.filter(emp => {
        // 检查员工的科目数组是否包含目标科目（忽略大小写）
        return emp.subjects.some(subj => subj.toLowerCase().includes(target))
      })
    }
  }
}
</script>

3. 渲染过滤后的数据 #

更新模板，使用过滤后的员工列表，并正确遍历科目数组：

<template>
  <div>
    <!-- 过滤输入框 -->
    <input 
      type="text" 
      v-model="filterSubject" 
      placeholder="输入科目过滤员工"
    >

    <!-- 渲染结果 -->
    <div v-for="employee in filteredEmployees" :key="employee.id">
      <p>员工ID: {{ employee.id }}</p>
      <div v-for="subject in employee.subjects" :key="subject">
        {{ subject }}
      </div>
    </div>
  </div>
</template>

关键说明 #

• 数据预处理时用split(',')拆分字符串，trim()清理空格，避免出现无效的科目项。
• 计算属性会实时响应过滤关键词的变化，自动更新筛选结果，无需手动触发。
• 过滤逻辑加入了大小写不敏感匹配，提升用户使用体验。

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