面试题：Vue中复杂动态表单（含嵌套表单结构）的数据绑定与生成技巧

实现思路

数据结构设计：在Vue的data中定义一个数组来存储商品项，每个商品项是一个对象，包含名称、价格、数量等属性。
动态表单生成：使用v-for指令遍历商品项数组，为每个商品项生成对应的表单元素。
双向数据绑定：使用v-model指令实现表单元素与数据的双向绑定，这样修改表单会同步更新数据，数据变化也会反映在表单上。
数据提交：定义一个提交方法，在方法中直接获取Vue实例中存储的订单数据并进行提交操作。

关键代码示例

<template>
  <div>
    <form @submit.prevent="submitOrder">
      <div v-for="(item, index) in orderItems" :key="index">
        <label>商品名称:</label>
        <input type="text" v-model="item.name">
        <label>商品价格:</label>
        <input type="number" v-model="item.price">
        <label>商品数量:</label>
        <input type="number" v-model="item.quantity">
        <button type="button" @click="removeItem(index)">移除商品</button>
      </div>
      <button type="button" @click="addItem">添加商品</button>
      <button type="submit">提交订单</button>
    </form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      orderItems: [
        { name: '', price: 0, quantity: 0 }
      ]
    };
  },
  methods: {
    addItem() {
      this.orderItems.push({ name: '', price: 0, quantity: 0 });
    },
    removeItem(index) {
      this.orderItems.splice(index, 1);
    },
    submitOrder() {
      console.log('提交的订单数据:', this.orderItems);
      // 这里可以进行实际的提交逻辑，比如发送HTTP请求
    }
  }
};
</script>

星途面试题库

面试题：Vue中复杂动态表单（含嵌套表单结构）的数据绑定与生成技巧

知识考点

面试题答案

实现思路

关键代码示例