elementuI输入框自动聚焦

需求：需要点击输入框自动聚焦，但是每次只有第一次点击的时候会自动聚焦，第二次无效果

<div class="tulingLayout-fb" @click="onShowInput" v-if="!showInput">
        <div class="tulingLayout-name">{{ viewModel.data.name }}</div>
        <div class="bottom-nametwo" v-if="viewModel.data.name&&viewModel.data.isPublish">成功</div>
      </div>

使用element-ui输入框 定义ref

<el-input v-model="viewModel.data.name" placeholder="请输入" ref="inputRef" v-if="showInput" :autofocus="true" maxlength="10"
        @change="showInput=false" @blur="showInput=false"></el-input>

 

vue中，第二次点击的时候，页面再次渲染了，需要借助$nextTick ，调用focus()方法，获取最新视图

onShowInput(){
        this.$nextTick(() => {
       this.$refs.focusInput.focus()
        })
}