v-for遍历ref获取焦点 input标签

小前端

于 2024-06-07 09:17:50 发布

阅读量215

点赞数 1

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/weixin_45041493/article/details/139514909

版权

<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>