Vue 动态表单 数据获取

Vue 动态表单的数据获取可以通过以下两种方式实现：

1. 双向绑定：在 Vue 中，可以使用 `v-model` 指令实现数据的双向绑定。在动态表单中，可以将表单元素的值绑定到 Vue 实例中的数据属性上，这样当表单元素的值发生变化时，对应的数据属性也会自动更新。同时，当数据属性的值发生变化时，表单元素的值也会自动更新。

示例代码：

<template>
  <div>
    <form>
      <div v-for="(item, index) in formItems" :key="index">
        <label>{{ item.label }}</label>
        <input v-model="formData[item.name]" :type="item.type">
      </div>
    </form>
    <button @click="submit">提交</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      formItems: [
        { label: '姓名', name: 'name', type: 'text' },
        { label: '年龄', name: 'age', type: 'number' },
        { label: '性别', name: 'gender', type: 'radio', options: [{ label: '男', value: 'male' }, { label: '女', value: 'female' }] },
      ],
      formData: {},
    }
  },
  methods: {
    submit() {
      console.log(this.formData) // 输出表单数据
    }
  }
}
</script>

2. 表单提交：在表单提交时，可以通过表单元素的 `name` 属性来获取表单数据。在 Vue 中，可以通过 `ref` 属性来获取表单元素的引用，然后在提交表单时，通过引用获取表单元素的值。

示例代码：

<template>
  <div>
    <form ref="form">
      <div v-for="(item, index) in formItems" :key="index">
        <label>{{ item.label }}</label>
        <input :name="item.name" :type="item.type">
      </div>
    </form>
    <button @click="submit">提交</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      formItems: [
        { label: '姓名', name: 'name', type: 'text' },
        { label: '年龄', name: 'age', type: 'number' },
        { label: '性别', name: 'gender', type: 'radio', options: [{ label: '男', value: 'male' }, { label: '女', value: 'female' }] },
      ],
    }
  },
  methods: {
    submit() {
      const formData = {}
      const form = this.$refs.form
      for (let i = 0; i < form.length; i++) {
        const input = form[i]
        if (input.name) {
          formData[input.name] = input.value
        }
      }
      console.log(formData) // 输出表单数据
    }
  }
}
</script>