uni-app form 动态数组组件

在uni-app中，我们可以使用v-for指令来创建一个动态数组组件。这种方法可以用于创建一个表单，其中包含一系列可以动态添加或删除的输入字段。

以下是一个简单的例子，展示了如何使用v-for指令动态创建一个表单数组：

<template>
  <view>
    <form @submit="onSubmit">
      <view v-for="(item, index) in formItems" :key="index">
        <input type="text" v-model="item.value" :placeholder="`Item ${index + 1}`">
        <button @click="removeItem(index)">Remove</button>
      </view>
      <button @click="addItem">Add Item</button>
      <button form-type="submit">Submit</button>
    </form>
  </view>
</template>
 
<script>
export default {
  data() {
    return {
      formItems: [
        { value: '' } // 初始空表单项
      ]
    }
  },
  methods: {
    addItem() {
      this.formItems.push({ value: '' }); // 添加一个新的空表单项
    },
    removeItem(index) {
      this.formItems.splice(index, 1); // 删除指定索引的表单项
    },
    onSubmit(e) {
      e.preventDefault();
      console.log('Form submitted with items:', this.formItems);
      // 处理表单提交
    }
  }
}
</script>

在这个例子中，我们有一个表单，其中包含了一个动态数组formItems。我们可以通过点击"Add Item"按钮来添加新的空白输入字段，或者点击每一行的"Remove"按钮来删除特定的输入字段。提交表单时，我们可以看到所有填写的字段。