vue element ui input 自动获取焦点(解决只有第一次起作用问题,autofocus失效问题解决)
原因:autofocus是vue中input的原生属性,element也支持这种方法,但是element中的el-input组件外面还有其他组件, 导致autofocus失效, 只能手动调用focus方法来聚集。解决方案:借助动态绑定ref属性,在this.$nextTick调用focus()方法。在线运行<div id="app"><div v-for="(item,i) in
·
原因:
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值.
更多推荐
已为社区贡献15条内容
所有评论(0)