Vue.js中如何动态获取元素值？动态使用$refs的方法

其实这个问题在Vue里处理起来很简单，核心就是利用对象属性的方括号访问语法——因为this.$refs本质上就是个普通的JavaScript对象，它的键是你定义的ref名称，值就是对应的DOM元素（或组件实例）。

具体步骤和示例 #

假设你是通过v-for循环创建这些输入框的，比如：

<template>
  <div>
    <input 
      v-for="i in 3" 
      :key="i" 
      :ref="'txtScore' + i" 
      type="text" 
      placeholder="输入分数"
    >
    <button @click="getScore">获取指定分数</button>
  </div>
</template>

然后在脚本部分，你可以这样动态访问任意一个txtScoreX的value：

export default {
  methods: {
    getScore() {
      // 比如获取txtScore1的值
      const score1 = this.$refs['txtScore1']?.value;
      console.log('分数1:', score1);

      // 如果要循环遍历所有分数，也可以这么写
      for (let i = 1; i <= 3; i++) {
        const score = this.$refs[`txtScore${i}`]?.value;
        console.log(`分数${i}:`, score);
      }
    }
  }
}

关键要点 #

• 因为this.$refs是对象，所以你可以用方括号+字符串拼接的方式动态访问属性，就像操作普通JS对象一样。
• 建议加上可选链操作符?.，避免因为某个ref不存在（比如元素还没渲染完成）而抛出错误。
• 如果你的输入框是在v-for里创建，且ref名称是唯一的（比如拼接了索引），那么每个this.$refs['txtScoreX']都会直接指向对应的单个DOM元素，直接取.value即可。

补充：批量处理多个ref #

如果你的场景是需要一次性获取所有txtScore开头的输入框的值，还可以通过遍历this.$refs的键来筛选：

getAllScores() {
  const scores = {};
  for (const key in this.$refs) {
    if (key.startsWith('txtScore')) {
      scores[key] = this.$refs[key].value;
    }
  }
  console.log('所有分数:', scores);
}

这样不管你有多少个txtScore开头的输入框，都能一次性收集它们的值啦～

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