如何在Vue下拉列表中显示采集的数据

<template>
  <div>
    <select v-model="selectedValue">
      <option v-for="item in dataList" :value="item.id" :key="item.id">{{ item.name }}</option>
    </select>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dataList: [], // 存储采集的数据
      selectedValue: '' // 选中的值
    };
  },
  created() {
    // 在created钩子函数中获取采集的数据，这里假设通过网络请求获取数据
    // 可以使用axios、fetch等库进行网络请求
    // 示例中使用setTimeout模拟异步请求
    setTimeout(() => {
      // 假设获取到的数据为一个数组，每个项包含id和name属性
      const response = [
        { id: 1, name: 'Option 1' },
        { id: 2, name: 'Option 2' },
        { id: 3, name: 'Option 3' }
      ];
      this.dataList = response;
    }, 1000);
  },
  watch: {
    selectedValue(newValue) {
      // 监听选中值的变化，可以执行相应的操作
      console.log('Selected value:', newValue);
    }
  }
};
</script>