账号密码登录
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
找回密码返回
邮箱找回手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    vue动态添加input后怎么立刻获取到焦点
    21
    0

    问题描述

    问题出现的环境背景及自己尝试过哪些方法

    相关代码

    <el-table-column prop="Barcodenumber" align="center" label="条形码编号" min-width="300">

                        <template slot-scope="scope">
                            <el-input v-if="scope.row.Tradename===''" style="display: inline-block;width: 200px" @keyup.enter.native="InputBarcode(scope.$index)" ref="saveTagInput"  placeholder="请输入商品条形码" v-model="scope.row.Barcodenumber"></el-input>
                            <el-button v-if="scope.row.Tradename===''" style="margin-left:10px" @click="showInput" type="primary" icon="el-icon-search"></el-button>
                            <span v-if="scope.row.Tradename!=''">{{scope.row.Barcodenumber}}</span>
                        </template>
                    </el-table-column>
                    
                    //js
                    InputBarcode(index){
                showStoreGoodsByBarCode({
                    goodsBarCode:this.ordersdetailList[index].Barcodenumber
                }).then(res=>{
                    if(res.errorCode==='0'){
                        this.ordersdetailList.push({Barcodenumber:"",Tradename:"",Commodityunit:"",Unit:"",Discount:"",Totalprice:"",goodsCode:"",buyNum:""})
                        this.ordersdetailList[index].Tradename = res.data.goodsName
                        this.ordersdetailList[index].Commodityunit = res.data.unit
                        this.ordersdetailList[index].buyNum = 1
                        this.ordersdetailList[index].Unit = res.data.suggestSellPrice
                        this.ordersdetailList[index].Discount = res.data.isConsumable === '2' ? '否' : '是'
                        this.ordersdetailList[index].Totalprice = this.ordersdetailList[index].buyNum * this.ordersdetailList[index].Unit
                        this.ordersdetailList[index].goodsCode = res.data.goodsCode
                        this.$nextTick(() => {
                            this.$refs['saveTagInput'].$refs.input.focus();
                        });
                    }else{
                        this.$message.error(res.errorMsg)
                    }
                })
    
    

    你期待的结果是什么?实际看到的错误信息又是什么?

    请求完成之后自动添加一条数据,同时文本框获得焦点,现在新增的数据没办法获取到焦点

    0
    打赏
    收藏
    点击回答
    您的回答被采纳后将获得:提问者悬赏的 10 元积分
        全部回答
    • 0
    • 舊時貓巷 普通会员 1楼

      在Vue中,你可以使用v-model指令来管理输入框的值,然后使用v-if指令来判断是否为焦点状态。以下是一个示例:

      html <input type="text" v-model="inputValue" v-if="isInputFocus" @input="setInputFocus">

      在这个例子中,v-model指令将输入框的值绑定到inputValue属性中,v-if指令将只有当inputValue为真时才显示输入框,这样就可以立即获取到焦点状态。

      注意,你需要确保你的inputValuev-if条件中始终为真,否则输入框将不会显示。

      此外,如果你的输入框是通过JavaScript动态添加的,你可能需要使用v-for指令来遍历输入框的所有子元素,以便正确获取焦点。以下是一个示例:

      ```html

      ```

      在这个例子中,v-for指令遍历inputs数组中的所有元素,每个元素都有一个唯一的ID。v-model指令将输入框的值绑定到inputValue属性中,v-if指令将只有当inputValue为真时才显示输入框,这样就可以立即获取到焦点状态。

    更多回答
    扫一扫访问手机版