Vue 3 中使用 Fetch API 填充下拉菜单：数据转换的关键

<template>
  <div>
    <div>to wit: {{ dropdownData }}</div>
    <select v-model="reason">
      <option v-for="r in dropdownData.reasons" :value="r">{{ r }}</option>
    </select>
    <select v-model="condition">
      <option v-for="c in dropdownData.conditions" :value="c">{{ c }}</option>
    </select>
    <select v-model="incidentType">
      <option v-for="type in dropdownData.incidentTypes" :value="type">{{ type }}</option>
    </select>
    <button @click="getData">Get Data</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      reason: null,
      condition: null,
      incidentType: null,
      dropdownData: {
        reasons: [],
        conditions: [],
        incidentTypes: []
      }
    }
  },
  mounted() {
    this.fetchDropdownData()
  },
  methods: {
    fetchDropdownData() {
      fetch(`${import.meta.env.VITE_API_VERBOSE}`)
        .then((response) => {
          if (!response.ok) {
            throw new Error('Network response was not ok')
          }
          return response.json()
        })
        .then((data) => {
          // 初始尝试：直接将 API 响应的属性赋值给 dropdownData
          this.dropdownData = {
            reasons: [...data.reasons],
            conditions: [...data.conditions],
            incidentTypes: [...data.incidentTypes]
          }
        })
        .catch((error) => {
          console.error('Error:', error)
        })
    },
    getData() {
      // 使用选定值进行后续操作
    }
  }
}
</script>

[
  {
    "id": "1",
    "reason": "Accident",
    "condition": "Wet",
    "incidentType": "Collision",
    "location": "..."
  },
  {
    "id": "2",
    "reason": "Construction",
    "condition": "Dry",
    "incidentType": "Roadwork",
    "location": "..."
  },
  // ... 更多事件对象
]

        .then((data) => {
          // 确保 data 是一个数组
          if (!Array.isArray(data)) {
            console.error('API response is not an array:', data);
            return;
          }

          // 使用 map 方法从每个事件对象中提取所需属性
          this.dropdownData = {
            reasons: data.map(el => el.reason),
            conditions: data.map(el => el.condition),
            incidentTypes: data.map(el => el.incidentType)
          }
        })

        .then((data) => {
          if (!Array.isArray(data)) {
            console.error('API response is not an array:', data);
            return;
          }

          this.dropdownData = {
            // 使用 Set 去除重复项，再转回数组
            reasons: [...new Set(data.map(el => el.reason))],
            conditions: [...new Set(data.map(el => el.condition))],
            incidentTypes: [...new Set(data.map(el => el.incidentType))]
          }
        })

// ... (其他部分保持不变)

  methods: {
    fetchDropdownData() {
      fetch(`${import.meta.env.VITE_API_VERBOSE}`)
        .then((response) => {
          if (!response.ok) {
            throw new Error('Network response was not ok')
          }
          return response.json()
        })
        .then((data) => {
          // 验证 API 响应是否为数组
          if (!Array.isArray(data)) {
            console.error('API response is not an array as expected:', data);
            // 可以选择清空或设置默认值
            this.dropdownData = { reasons: [], conditions: [], incidentTypes: [] };
            return;
          }

          // 使用 map 提取属性，并使用 Set 去除重复项
          this.dropdownData = {
            reasons: [...new Set(data.map(el => el.reason))],
            conditions: [...new Set(data.map(el => el.condition))],
            incidentTypes: [...new Set(data.map(el => el.incidentType))]
          }
          console.log("Dropdown data populated:", this.dropdownData);
        })
        .catch((error) => {
          console.error('Error fetching dropdown data:', error)
          // 在错误发生时，确保下拉菜单数据清空或显示错误信息
          this.dropdownData = { reasons: [], conditions: [], incidentTypes: [] };
        })
    },
    // ... (getData 方法保持不变)
  }

// ... (其他部分保持不变)