vue回车新增一个输入框并且光标下移

vue 回车触发聚焦 @keyup.enter.native
enter时光标下移的本质就是当前input失焦,让下一个input聚焦:

可以使用给定ref值的方法

---

 <el-form-item label="常见问题">
	<div v-for="(item,idx) in basicSettingForm.commonProblemList" :key="idx" class="commonQuestion" >
	  <!--  点击enter新增且光标下移 -->
	  <el-input :ref="`idx-${idx}`" v-model="basicSettingForm.commonProblemList[idx]" placeholder="请输入问题" style="width:60%;" size="mini" @keyup.enter.native="addTabQuestion($event,idx)"></el-input>
	  <i v-if="idx===basicSettingForm.commonProblemList.length-1" class="el-icon-circle-plus-outline" style="font-size:20px" @click="addQuestion(2)"></i>
	  <i class="el-icon-top" style="font-size:20px" @click="moveUpQuestion(idx)"></i>
	  <i v-if="idx!==0" class="el-icon-delete-solid" style="font-size:20px" @click="delQuestion(idx)"></i>
	</div>
 </el-form-item>

// 增加输入框并且光标下移
 addTabQuestion (event, idx) {
   this.addQuestion(1, event, idx)
 },
 // 增加常见问题
 addQuestion (flag, event, idx) {
   const that = this
   this.basicSettingForm.commonProblemList.push('')
   if (flag === 1) {
     this.$nextTick(() => {
       event.target.blur()//当前元素失焦
       that.$refs[`idx-${idx + 1}`][0].focus()//下一个元素聚焦,重点在于$refs[`AA`]后面一个要加[0],否则拿不到下一个元素
     })
   }
 },
// 上移当前常见问题
moveUpQuestion (idx) {
  const arr = this.basicSettingForm.commonProblemList
  arr.splice(idx - 1, 1, ...arr.splice(idx, 1, arr[idx - 1]))
},