Vue.js中如何优雅地处理异步数据加载和动态渲染Select框？

<code class="vue"><template>
  <el-select v-model="selectValue" @change="handleChange">
    <el-option v-for="item in selectoptions" :key="item.value" :label="item.label" :value="item.value">
    </el-option>
  </el-select>
</template>

<script>
import axios from 'axios'; // 假设使用axios进行异步请求

export default {
  props: {
    value: {
      type: [String, Number, undefined],
      default: undefined
    }
  },
  emits: ['update:value'],
  data() {
    return {
      selectoptions: [],
      selectValue: undefined // 初始值设置为undefined
    };
  },
  created() {
    this.getoptions();
  },
  computed: {
    // selectValue: {
    //   get() { return this.value },
    //   set(val) { this.$emit('update:value', val); }
    // }
  },
  methods: {
    async getoptions() {
      try {
        const response = await axios.get('/api/options'); // 替换为你的API地址
        this.selectoptions = response.data;
        this.selectValue = this.value; // 设置初始值
      } catch (error) {
        console.error('获取选项数据失败:', error);
      }
    },
    handleChange(value) {
      this.$emit('update:value', value);
    }
  }
};
</script></code>

<code class="vue"><template>
  <div>
    <button @click="fetchData">获取数据</button>
    <child-component v-model="selectedOption" @update:value="handleChildValue"/>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: { ChildComponent },
  data() {
    return {
      selectedOption: undefined
    };
  },
  methods: {
    handleChildValue(value) {
      this.selectedOption = value;
      console.log('父组件接收到的值:', value);
    },
    fetchData() {
      // 可以在这里触发子组件的 getoptions 方法，例如：
      // this.$refs.childComponent.getoptions();
    }
  }
};
</script></code>