共计 1502 个字符，预计需要花费 4 分钟才能阅读完成。
起因：
autofocus 是 vue 中 input 的原生属性,element 也反对这种办法,
然而 element 中的 el-input 组件里面还有其余组件, 导致 autofocus 生效, 只能手动调用 focus 办法来汇集。
解决方案：
借助动静绑定 ref 属性，在 this.$nextTick 调用 focus()办法。
<div id=”app”>
<div v-for=”(item,i) in data”>
{{item.id}}.{{item.text}}
<el-input v-show="item.edit"
type="text"
placeholder="请输出内容"
v-model="item.text"
:ref="'input'+ item.id "
>
</el-input>
<button @click="edit(item)"> 编辑 </button><div>
</div>
//js 局部
var Main = {
data() {
return {
data:[
{
id:1,
edit:false,
text:"22"
},
{
id:2,
edit:false,
text:"33"
}
]
}},
methods:{
edit(item){this.data.map((item1)=>{if(item1.id==item.id){
item1.edit=!item1.edit;
this.$nextTick(()=>{ // 次要代码
let id = 'input'+item.id;
this.$refs[id][0].focus();})
}
})
}}
}
var Ctor = Vue.extend(Main) // 如果在 vue-cli 里就不必写
new Ctor().$mount(‘#app’)// 如果在 vue-cli 里就不必写
补充问题：
1. 对于打印 this.$refs 有的状况是组件实例 有的时候是数组
这是 vue 的个性, 主动把 v -for 外面的 ref 开展成数组的模式.
假如你的 ref 不是动静的, 而是动态的，ref=”a”，
那么不论你执行多少次循环, 最初 ref 只会有一个值,
所以 vue 为了解决这种状况会把 v -for 里 ref
转为数组模式，为了能捕获所有的 ref 值.
Vue 自身提供了自定义指令的办法
// 注册一个全局自定义指令 v-focus
Vue.directive(‘focus’, function (el) {
el.focus()})
这样使咱们在组件中能够自用的调用 v -focus 办法，给他绑定定义布尔变量来管制元素是否取得焦点
然而这里要留神的是组件 <el-input> 自身在页面中渲染成了一个 div 元素
所以咱们要在 <el-input> 被绑定为 v -focus 的同时
在自定义指令中获取组件下通过 querySelector()办法获取 input 元素
<el-input
v-model.trim=”searchFor”
@blur=”blurSearchFor”
v-focus=”blurFocus”>
</el-input>
Vue.directive(‘focus’, function (el) {
el.querySelector(‘input’).focus()
})
Vue 自身提供了自定义指令的办法 2
应用 Vue 提供的自定义指令来解决，还有一点儿须要留神，el-input 在页面渲染后，外层是个 div，须要拿到外面的 input 才会有成果。
<el-input v-focus></el-input>
directives: {
// 注册一个部分的自定义指令 v-focus
focus: {
// 指令的定义
inserted: function (el) {
// 聚焦元素
el.querySelector('input').focus()}}
},