在Vue 3中加载异步选项时自动选择第一个<select>选项

<template>
  <div>
    <select v-model="selectedOption" @change="handleChange">
      <option disabled value="">请选择一个选项</option>
      <option v-for="option in options" :key="option.id" :value="option.value">{{ option.label }}</option>
    </select>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedOption: '',
      options: []
    };
  },
  mounted() {
    this.handleChange(); // 手动触发一次选择事件
  },
  methods: {
    handleChange() {
      if (this.options.length > 0) {
        this.selectedOption = this.options[0].value; // 自动选择第一个选项
      }
    },
    // 异步加载选项的操作，可以使用axios、fetch等方式
    fetchOptions() {
      // 发起异步请求，获取选项数据
      // 将获取到的数据赋值给this.options
    }
  },
  created() {
    this.fetchOptions(); // 异步加载选项数据
  }
};
</script>