用vue 方式 遍历一个表单的数据

可以使用Vue的v-for指令来遍历表单数据，例如：

<template>
  <form>
    <div v-for="(field, i) in formFields" :key="i">
      <label :for="field.id">{{ field.label }}</label>
      <input :id="field.id" :name="field.name" :type="field.type" :value="formData[field.name]" @input="updateFormData">
    </div>
  </form>
</template>

<script>
export default {
  data() {
    return {
      formFields: [
        { label: 'Name', name: 'name', id: 'name', type: 'text' },
        { label: 'Email', name: 'email', id: 'email', type: 'email' },
        { label: 'Phone', name: 'phone', id: 'phone', type: 'tel' }
      ],
      formData: {}
    }
  },
  methods: {
    updateFormData(event) {
      const fieldName = event.target.name;
      const fieldValue = event.target.value;
      this.formData[fieldName] = fieldValue;
    }
  }
};
</script>

在上面的示例中，我们首先定义了一个表单字段数组（formFields），其中包含每个表单元素的标签，名称，ID和类型。然后，我们使用v-for指令遍历这些字段，并使用动态绑定来设置每个表单元素的ID，名称，类型和值。最后，我们定义了一个updateFormData方法来更新formData对象，以便在用户输入时保存表单数据。