使用element-ui 动态编辑标签 用的它提供的回调,将input切换为tag,触发条件是失去焦点或回车,失焦没有问题,回车时会执行根本不会执行的语句
//自动获取焦点
autoFocus() {
this.$nextTick(() => {
this.$refs.saveTagInput.$refs.input.focus()
})
},
//点击添加按钮
showInput(row) {
this.$set(row, 'inputVisible', true)
this.$set(row, 'inputValue', '')
this.autoFocus()
},
handleInputConfirm(row) {
const { baseSaleAttrId, inputValue } = row
//判断属性值是否重复
let result = row.spuSaleAttrValueList.every((item) => {
return item.saleAttrValueName != inputValue
})
//判断输入框是否为空
if (inputValue.trim() == '') {
this.$message({ message: '请输入属性值', type: 'warning' })
}
//判断是否重复
else if (!result) {
this.$message.error('重复的属性值')//使用回车可以执行语句,但是!result=false也就是没有输入重复的值,且跳过了retrun,可以将代码执行到底
this.autoFocus()
return
}
//保存输入框
else {
let newAttrValue = { baseSaleAttrId, saleAttrValueName: inputValue }
row.spuSaleAttrValueList.push(newAttrValue)
}
//输入框状态改变
row.inputVisible = false
},
感谢回答,我发现问题了,我是把keyup和blur回调写成了一个,在我按下enter键的时候,会先触发了blur,再触发enter,回调执行了两次,第一次就将数据添加到列表,第二次执行提示重复,且ref失效了
this下没有refs .ref绑定对了吗