Vue 3 中使用 Fetch API 处理复杂数据并动态填充下拉菜单的实践

[
  {
    "id": "1",
    "reason": "Accident",
    "condition": "Wet",
    "incidentType": "Road Closure"
  },
  {
    "id": "2",
    "reason": "Construction",
    "condition": "Dry",
    "incidentType": "Lane Blockage"
  },
  {
    "id": "3",
    "reason": "Accident",
    "condition": "Wet",
    "incidentType": "Road Closure"
  },
  {
    "id": "4",
    "reason": "Maintenance",
    "condition": "Icy",
    "incidentType": "Shoulder Work"
  }
]

const reasonsArray = data.map(el => el.reason);
// 结果可能是：["Accident", "Construction", "Accident", "Maintenance"]

const uniqueReasonsSet = new Set(reasonsArray);
// 结果是 Set {"Accident", "Construction", "Maintenance"}

const uniqueReasons = [...uniqueReasonsSet];
// 结果是 ["Accident", "Construction", "Maintenance"]

// ...
.then((data) => {
  // data 现在是一个事件对象数组
  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))]
  };
})
// ...

<template>
  <div>
    <div>to wit: {{ dropdownData }}</div>
    <select v-model="reason">
      <option v-for="r in dropdownData.reasons" :value="r" :key="r">{{ r }}</option>
    </select>
    <select v-model="condition">
      <option v-for="c in dropdownData.conditions" :value="c" :key="c">{{ c }}</option>
    </select>
    <select v-model="incidentType">
      <option v-for="type in dropdownData.incidentTypes" :value="type" :key="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() {
      // 实际 API 地址，这里使用一个环境变量来模拟
      // 例如：https://eapps.ncdot.gov/services/traffic-prod/v1/incidents?verbose=true
      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) => {
          // 核心修正：使用 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))]
          }
        })
        .catch((error) => {
          console.error('Error fetching dropdown data:', error)
        })
    },
    getData() {
      // 在这里可以使用选定的值：this.reason, this.condition, this.incidentType
      // 执行进一步的操作或 API 调用
      console.log('Selected Reason:', this.reason);
      console.log('Selected Condition:', this.condition);
      console.log('Selected Incident Type:', this.incidentType);
    }
  }
}
</script>