面试题：Vue中如何在表单绑定里处理简单异步数据加载与绑定

基本步骤：
- 在Vue组件的data中定义一个数组，用于存储从后端获取的用户列表数据。
- 在created钩子函数（或mounted钩子函数，取决于具体需求，created钩子在组件实例创建完成后立即调用，mounted钩子在组件挂载到DOM后调用）中发起异步请求获取用户列表数据。
- 将获取到的数据赋值给data中定义的数组。
- 在模板中使用v - model指令绑定下拉选择框的值，并使用v - for指令遍历用户列表数据，生成下拉选项。
关键代码示例：

<template>
  <div>
    <select v - model="selectedUser">
      <option v - for="user in userList" :key="user.id">{{user.name}}</option>
    </select>
  </div>
</template>

<script>
export default {
  data() {
    return {
      userList: [],
      selectedUser: null
    };
  },
  created() {
    this.fetchUserList();
  },
  methods: {
    async fetchUserList() {
      try {
        // 假设使用axios进行HTTP请求，实际需根据项目引入和配置
        const response = await axios.get('/api/userList');
        this.userList = response.data;
      } catch (error) {
        console.error('获取用户列表失败', error);
      }
    }
  }
};
</script>

注：上述代码中axios需根据实际项目进行引入和配置，如果项目使用其他HTTP请求库，如fetch，请求部分代码需相应调整。同时/api/userList为假设的后端接口地址，需根据实际后端接口进行修改。

面试题：Vue中如何在表单绑定里处理简单异步数据加载与绑定

知识考点

面试题答案