关于前端: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 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()
}

}
},