Vue中通过ref获取元素设置焦点失败，$refs值为空求助

你的问题核心是对Vue 2中ref的使用逻辑理解有误：

• 对于原生HTML元素（比如你的<input>），this.$refs.inp2直接指向DOM元素本身，不需要额外访问$el属性；只有当ref绑定在Vue自定义组件上时，才需要通过$el获取组件对应的根DOM元素。

另外你看到$refs里的值是空对象，是JSON.stringify无法正确序列化DOM元素导致的假象——DOM元素包含循环引用，JSON无法解析，所以会显示为空对象，但实际上this.$refs.inp2是有效的DOM元素，可以直接调用它的方法。

修正后的代码 #

JavaScript部分

Vue.config.productionTip = false;
Vue.config.devtools = false;

var app = new Vue({
  el: '#app',
  data: {
    message: 'World'
  },
  methods: {
    click() {
      // 直接调用DOM元素的focus方法即可
      this.$refs.inp2.focus();
    }
  }
})

HTML部分（无需改动）

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <h1>Why are refs empty objects?</h1>
  <input ref="inp1"></input><br/><br/>
  <input ref="inp2" placeholder="i want focus on click"></input><br/><br/>
  <button @click="click">Click me</button>
</div>

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