vue增加和删除输入框并获取值

在上一个问题中我们已经实现了增加和删除输入框的功能，接下来我们来获取输入框的值。具体实现步骤如下：

1. 在数据中定义一个对象，用于存储所有输入框的值。

data() {
  return {
    inputFields: [],
    formData: {}
  }
}

2. 修改 addInputField 方法，每次添加输入框时向 formData 对象中添加一个空的属性。

methods: {
  addInputField() {
    this.inputFields.push('')
    this.$set(this.formData, `input${this.inputFields.length}`, '')
  }
}

3. 在模板中使用 v-model 指令绑定每个输入框的值，并在绑定时指定对应的 formData 属性。

<template>
  <div>
    <div v-for="(input, index) in inputFields" :key="index">
      <input v-model="formData[`input${index + 1}`]" type="text">
      <button @click="removeInputField(index)">删除</button>
    </div>
    <button @click="addInputField()">添加输入框</button>
    <button @click="submitForm()">提交</button>
  </div>
</template>

4. 创建一个 submitForm 方法，用于提交表单数据。在此方法中可以通过 formData 对象获取所有输入框的值。

methods: {
  submitForm() {
    console.log(this.formData)
  },
  // 省略 addInputField 和 removeInputField 方法
}

这样就可以通过 formData 对象获取所有输入框的值了。在控制台中输出 formData 对象可以看到每个输入框的值都被正确地存储在了对应的属性中。