Vue.js中获取Vuetify v-form动态组件ID与值的实现方法

原方案存在的问题 #

你之前使用querySelectorAll(".baz")拿到大量嵌套div的核心原因是：Vuetify的v-text-field、v-checkbox这类输入组件，会把外部传入的class、id属性绑定到组件最外层的包裹div上，而非组件内部渲染的原生表单控件节点，因此选择器命中的是容器层，不是可直接读取值的目标元素。

推荐实现方式（优先选第一种） #

1. 基于Vuetify内置的组件实例遍历（最稳定，无DOM结构依赖） #

Vuetify的v-form组件本身会自动收集所有内嵌的表单类子组件实例，完全不需要手动爬取DOM，规避版本迭代带来的DOM结构变动问题。
实现代码：

// 直接获取v-form的组件实例，而非其绑定的DOM元素
const formInstance = this.$refs.bar
// 从form内置的items集合中过滤出目标组件（带.baz类的输入组件）
const targetComponents = formInstance.items.filter(item => 
  item.$el.classList.contains('baz')
)
// 遍历打印对应id和值
targetComponents.forEach(component => {
  // component.id 就是你动态绑定到组件上的专属id
  // component.internalValue 是组件存储的真实值，适配v-text-field、v-checkbox等所有输入组件
  console.log(component.id, component.internalValue)
})

这种方式的优势：

• 不需要处理嵌套div的层级关系，拿到的直接是组件本身
• 不同类型输入组件的值读取逻辑统一，不需要单独适配v-checkbox这类特殊组件的DOM结构
• 取值精度和表单校验逻辑的数据源完全一致，不会出现DOM值和组件状态不同步的问题

2. 修正后的DOM查询路径（仅适合简单文本输入场景） #

如果倾向于走DOM选择器方案，只需要调整选择器精准定位到目标控件即可，不需要手动排查嵌套层级：

// 定位所有带.baz类的组件容器下的真实原生输入节点
const nativeInputs = this.$refs.bar.$el.querySelectorAll(".baz input, .baz textarea")
nativeInputs.forEach(input => {
  // 从父级容器取你绑定的专属id
  const customId = input.closest('.baz').id
  console.log(customId, input.value)
})

注意：这种方式不适合v-checkbox、v-switch这类组件，这类组件的原生input是隐藏元素，DOM上的默认值无法反映真实选中状态，必须通过组件实例读取值。

选型建议 #

优先使用基于组件实例的遍历方案，长期维护成本更低，完全不受Vuetify内部DOM结构调整的影响；DOM查询方案仅适合全是文本输入类组件的简单场景，不推荐作为通用方案。

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