Vue项目中如何将JSON字符串转为数组以实现Vue指令遍历

问题场景 #

从API获取的JSON数据里，employees数组的subjects字段是逗号分隔的字符串（如"English,Biology"），需要转成数组格式（如["English","Biology"]），才能用Vue的v-for指令遍历展示每个科目。

现有代码 #

API返回的JSON示例 #

{
  "employees": [
    {
      "id": 7099,
      "first_name": "Angela",
      "subjects": "English,Biology"
    },
    {
      "id": 7100,
      "first_name": "Aeliana",
      "subjects": "English,French"
    } 
  ]
}

Vue组件核心代码 #

<template>
    <div v-for="employee in employees" :key="employee.id">
      <p>{{ employee.first_name }}</p>
      <p>{{ employee.subjects }}</p>
    </div>
</template>

<script>
export default {
  data() {
    return {
      employees: []
    }
  },
  mounted() {
    fetch('http://localhost:3000/employees')
      .then(res => res.json())
      .then(data => this.employees = data)
      .catch(err => console.log(err.message)) 
  }
}
</script>

解决方案 #

方法一：获取数据时直接转换格式 #

在接收API返回数据后，遍历employees数组，把每个对象的subjects字符串分割为数组。修改mounted钩子中的代码：

<script>
export default {
  data() {
    return {
      employees: []
    }
  },
  mounted() {
    fetch('http://localhost:3000/employees')
      .then(res => res.json())
      .then(data => {
        // 处理每个employee的subjects字段
        this.employees = data.employees.map(employee => ({
          ...employee,
          // 分割字符串为数组，同时处理空值情况
          subjects: employee.subjects ? employee.subjects.split(',') : []
        }))
      })
      .catch(err => console.log(err.message)) 
  }
}
</script>

模板中遍历转换后的subjects数组：

<template>
    <div v-for="employee in employees" :key="employee.id">
      <p>{{ employee.first_name }}</p>
      <div class="subjects">
        <!-- 遍历转换后的subjects数组 -->
        <span v-for="(subject, idx) in employee.subjects" :key="idx" class="subject-item">
          {{ subject }}
        </span>
      </div>
    </div>
</template>

方法二：用计算属性处理数据（不修改原始数据） #

如果不想改动原始employees数据，可通过计算属性返回处理后的数组：

<script>
export default {
  data() {
    return {
      employees: []
    }
  },
  mounted() {
    fetch('http://localhost:3000/employees')
      .then(res => res.json())
      .then(data => this.employees = data.employees)
      .catch(err => console.log(err.message)) 
  },
  computed: {
    processedEmployees() {
      return this.employees.map(employee => ({
        ...employee,
        subjects: employee.subjects ? employee.subjects.split(',') : []
      }))
    }
  }
}
</script>

模板中遍历计算属性返回的数组：

<template>
    <div v-for="employee in processedEmployees" :key="employee.id">
      <p>{{ employee.first_name }}</p>
      <div class="subjects">
        <span v-for="(subject, idx) in employee.subjects" :key="idx" class="subject-item">
          {{ subject }}
        </span>
      </div>
    </div>
</template>

说明 #

两种方法核心都是用String.split(',')将逗号分隔的字符串转成数组，添加employee.subjects ? ... : []的判断是为了避免subjects为空字符串时出现[""]这类无效数组项。

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