面试题：Vue表单重置与动态初始值设置

数据获取：

在Vue组件的created或mounted钩子函数中调用后端接口获取用户登录信息。例如，假设使用axios库：

import axios from 'axios';
export default {
  data() {
    return {
      userInfo: {}
    };
  },
  created() {
    axios.get('/api/userInfo').then(response => {
      this.userInfo = response.data;
    }).catch(error => {
      console.error('获取用户信息失败', error);
    });
  }
};

表单绑定：

使用Vue的双向数据绑定，例如对于一个简单的文本输入框绑定用户姓名：

<template>
  <form>
    <input v-model="userInfo.name" type="text" placeholder="姓名">
    <!-- 其他表单字段类似绑定 -->
  </form>
</template>

对于根据前期操作动态变化的字段，使用v-if或v-show指令。例如：

<template>
  <form>
    <select v-model="selectedOption">
      <option value="option1">选项1</option>
      <option value="option2">选项2</option>
    </select>
    <input v-if="selectedOption === 'option2'" type="text" placeholder="选项2对应的输入框">
  </form>
</template>

export default {
  data() {
    return {
      selectedOption: ''
    };
  }
};

重置逻辑：

定义一个重置方法，在方法中重新设置表单数据为初始值。

export default {
  data() {
    return {
      userInfo: {},
      selectedOption: ''
    };
  },
  created() {
    // 获取用户信息逻辑
  },
  methods: {
    resetForm() {
      // 重新获取用户信息
      axios.get('/api/userInfo').then(response => {
        this.userInfo = response.data;
        this.selectedOption = ''; // 重置动态选项
      }).catch(error => {
        console.error('重置时获取用户信息失败', error);
      });
    }
  }
};

在模板中添加重置按钮调用该方法：

<template>
  <form>
    <!-- 表单内容 -->
    <button @click="resetForm">重置</button>
  </form>
</template>

通过以上步骤，实现了从后端获取动态初始值，表单绑定以及表单重置功能，确保重置后表单能恢复到基于用户登录信息的动态初始值状态。

星途面试题库

面试题：Vue表单重置与动态初始值设置

知识考点

面试题答案