v-for 循环多个van-form表单

v-for循环在Vue.js中用于遍历数组或对象，并创建相应的元素实例。如果你想在同一个页面上使用多个`van-form`表单，你可以这样做：

<template>
  <div>
    <form v-for="(item, index) in forms" :key="index">
      <van-form ref="form{{index}}" :model="item.model" @submit.prevent="handleFormSubmit(index)">
        <!-- 表单内容 -->
        <van-text-field name="field1" placeholder="请输入字段1"></van-text-field>
        <!-- 更多的 van-form 组件... -->
        <button type="submit">提交第 {{index + 1}} 个表单</button>
      </van-form>
    </form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      forms: [
        { model: {} }, // 第一个表单数据模型
        { model: {} }  // 第二个表单数据模型
        // 添加更多表单...
      ]
    };
  },
  methods: {
    handleFormSubmit(index) {
      this.$refs.form{{index}}.validate((valid) => {
        if (valid) {
          console.log(`提交了第 ${index + 1} 个表单`);
          // 提交表单相关的逻辑...
        }
      });
    }
  }
};
</script>

在这个例子中，我们为每个`van-form`组件分配了一个独立的数据模型，并通过`:key`属性保证唯一性。`handleFormSubmit`方法会处理对应表单的提交验证。