面试题：Vue嵌套表单中动态添加和删除子表单及处理数据一致性

实现思路

数据结构设计：采用数组来存储子表单数据，每个子表单对应数组中的一个对象。这样在添加或删除子表单时，便于对数据进行操作。
动态添加与删除：通过Vue的响应式原理，在主表单组件中维护一个子表单数据数组。利用v-for指令来渲染子表单，通过点击按钮等交互来触发添加或删除子表单的操作，同时更新子表单数据数组。
数据验证与完整性：在子表单组件内部进行数据验证，确保每个子表单的数据符合要求。在主表单提交时，遍历子表单数据数组，确保所有子表单数据都完整且有效。
提交到后端：将主表单和子表单的数据整理成符合后端接口要求的格式，通过axios等HTTP库发送POST请求将数据提交到后端。

关键代码逻辑

主表单组件

<template>
  <div>
    <form @submit.prevent="submitForm">
      <!-- 主表单其他字段 -->
      <input type="text" v-model="mainFormData.mainField">
      <div v-for="(subForm, index) in subFormData" :key="index">
        <SubForm :subFormData="subForm" @updateSubForm="updateSubForm(index)"/>
        <button @click="removeSubForm(index)">删除子表单</button>
      </div>
      <button @click="addSubForm">添加子表单</button>
      <button type="submit">提交表单</button>
    </form>
  </div>
</template>

<script>
import SubForm from './SubForm.vue';
export default {
  components: {
    SubForm
  },
  data() {
    return {
      mainFormData: {
        mainField: ''
      },
      subFormData: []
    };
  },
  methods: {
    addSubForm() {
      this.subFormData.push({});
    },
    removeSubForm(index) {
      this.subFormData.splice(index, 1);
    },
    updateSubForm(index, newData) {
      this.subFormData[index] = newData;
    },
    submitForm() {
      const formData = {
      ...this.mainFormData,
        subForms: this.subFormData
      };
      // 使用axios等发送POST请求到后端
      // axios.post('/api/submitForm', formData)
      //  .then(response => {
      //     console.log('表单提交成功', response);
      //   })
      //  .catch(error => {
      //     console.error('表单提交失败', error);
      //   });
    }
  }
};
</script>

子表单组件

<template>
  <div>
    <!-- 子表单字段 -->
    <input type="text" v-model="subFormData.subField">
    <button @click="validateAndUpdate">验证并更新</button>
  </div>
</template>

<script>
export default {
  props: {
    subFormData: {
      type: Object,
      default: () => ({})
    }
  },
  methods: {
    validateAndUpdate() {
      // 进行数据验证
      if (!this.subFormData.subField) {
        console.error('子表单字段不能为空');
        return;
      }
      this.$emit('updateSubForm', this.subFormData);
    }
  }
};
</script>

星途面试题库

面试题：Vue嵌套表单中动态添加和删除子表单及处理数据一致性

知识考点

面试题答案

实现思路

关键代码逻辑