<template>
<div v-for="(item,index) in listData" :key="index">
<Input v-model="item.inputValue" type="text" placeholder="请输入内容" ref="reflistData"
:disabled="item.isEdit" @on-blur="BlurFn(item,index)"/>
<Button @click="EditFn(item,index)">编辑</Button>
</div>
</template>
<script>
export default {
name: '',
data() {
return {
listData:[
{
name:'测试1',
inputValue:'',
isEdit:true
},
{
name:'测试1',
inputValue:'',
isEdit:true
}
]
}
}
methods: {
EditFn(item,index){
let itemObj=item
itemObj.isEdit=false
// for(let i=0;i<this.listData.length;i++){
// this.$refs.listData[i].blur()
// }
console.log( this.$refs.reflistData)
this.$set(this.listData,index,itemObj)
this.$nextTick(()=>{
this.$refs.reflistData[index].focus()
})
},
BlurFn(item,index){
let itemObj=item
itemObj.isEdit=true
this.$set(this.listData,index,itemObj)
this.$nextTick(()=>{
this.$refs.reflistData[index].blur()
})
}
}
}
</script>
v-for遍历ref获取焦点 input标签
最新推荐文章于 2024-09-12 11:40:49 发布