嘿，这个动态表单的场景我之前也处理过，其实不用纠结怎么去抓DOM元素的值——Vue的数据驱动思想刚好能完美解决这类问题，给你两种方案参考：

推荐方案：用数组管理动态输入框（数据驱动） #

这是最符合Vue设计理念的方式，全程不用碰DOM，数据和视图自动同步：

1. 初始化数据 #

在组件的data里定义一个数组，用来存储所有动态输入框的值：

data() {
  return {
    inputFields: [{ value: '' }] // 初始默认一个输入框
  }
}

2. 模板渲染动态输入框 #

用v-for循环渲染输入框，通过v-model绑定数组里的每一项，同时可以按需求生成带计数器的name属性：

<template>
  <form @submit="getFormValues">
    <!-- 动态输入框区域 -->
    <div v-for="(item, index) in inputFields" :key="index">
      <input 
        v-model="item.value" 
        :name="`Nr${index + 1}`" 
        placeholder="输入内容"
      />
      <!-- 删除按钮（可选），索引不为0时显示 -->
      <button type="button" @click="inputFields.splice(index, 1)" v-if="index > 0">删除</button>
    </div>

    <!-- 添加输入框按钮 -->
    <button type="button" @click="inputFields.push({ value: '' })">添加输入框</button>

    <!-- 提交按钮 -->
    <button type="submit">提交表单</button>
  </form>
</template>

3. 提交时获取所有值 #

提交方法里直接处理数组数据，按需构建后端需要的对象即可：

methods: {
  getFormValues(submitEvent) {
    submitEvent.preventDefault(); // 阻止默认表单提交行为
    
    // 构建后端需要的键值对（比如Nr1: "值1", Nr2: "值2"...）
    const formData = this.inputFields.reduce((result, item, index) => {
      result[`Nr${index + 1}`] = item.value;
      return result;
    }, {});

    // 这里就可以把formData传给后端接口了
    console.log('要提交的数据：', formData);
  }
}

这种方式的好处是：数据和视图完全绑定，新增/删除输入框时自动同步，不用手动去追踪DOM元素，代码更易维护。

备选方案：原生DOM查询（不推荐） #

如果你因为某些原因必须用原生DOM的方式获取值，可以通过querySelectorAll选择所有name以Nr开头的输入框，再遍历取值：

methods: {
  getFormValues(submitEvent) {
    submitEvent.preventDefault();
    
    // 选择所有name属性以"Nr"开头的输入框
    const inputElements = submitEvent.target.querySelectorAll('input[name^="Nr"]');
    const formData = {};

    // 遍历获取每个输入框的name和value
    inputElements.forEach(input => {
      formData[input.name] = input.value;
    });

    console.log('要提交的数据：', formData);
  }
}

不过这种方式不符合Vue的设计思路，当输入框动态变化时，DOM查询可能出现遗漏或错误，优先推荐第一种方案。

内容的提问来源于stack exchange，提问作者endrit sheholli