在vue开发中遇到在for循环中需要让某一个input框获取焦点，这就需要找到input这个元素，利用$refs来实现。
一开始我以为是在dom元素上使用 :ref="'input' + index",触发事件后发现报错找不到那个元素。后来查阅资料，直接在元素上写入ref="input"，通过事件打印可以发现this.$refs["input"]是一个数组：
这就好办了，拿到我对应元素的index和ref="input"数组匹配就能获取我想要的那个元素了。
下面是完整的代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>vue开发：for循环中通过$refs获取某一个元素</title>
<!--引入 element-ui 的样式，-->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>
<!-- 引入element 的组件库-->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<style>
* {
margin: 0;
padding: 0;
}
#app {
padding: 50px;
}
.inputWrap {
margin-bottom: 30px;
}
.inputWrap input {
width: 500px;
}
</style>
</head>
<body>
<div id="app">
<div class="inputWrap" v-for="(item, index) in inputWrap" :key="index">
<el-row>
<el-input :disabled="item.disabled" ref="input" type="text" v-model.trim="item.name" />
</el-row>
<el-row>
<el-button type="primary" @click="checkFun(item, index)">{{item.disabled ? '更改输入框内容' : '保存输入框内容'}}</el-button>
</el-row>
</div>
</div>
<script>
new Vue({
el: '#app',
data() {
return {
inputWrap: [
{
name: '输入框1',
disabled: true
},
{
name: '输入框2',
disabled: true
},
{
name: '输入框3',
disabled: true
},
{
name: '输入框4',
disabled: true
},
]
}
},
mounted() {
},
methods: {
checkFun(item, index) {
console.log(this.$refs["input"], 'this.$refs["input"]')
this.inputWrap[index].disabled = !this.inputWrap[index].disabled
this.$nextTick(() => {
this.$refs["input"][index].focus();
});
}
},
})
</script>
</body>
</html>
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。