【Vue】想问一下大佬关于vue ref获取input值的问题？

想要获取到input的value用value的长度去做判断，但是遇到了一点问题？ input是element的el-input下面上代码

<el-input placeholder="请扫入条码" v-model="barId" clearable v-on:input ="inputFunc" ref="barNo"></el-input>

这是布局的代码，末尾加了ref

inputFunc() {
console.log(this.$refs.barNo)
console.log(this.$refs.barNo.value)
const param = {
BarCode: this.barId
};
api.getbarcodeinfo(param).then(response => {
if (response.data.Success == false) {
this.$notify({
title: "失败",
message: response.data.Message,
type: "error",
duration: 2000
});
} else {
console.log(this.$refs.barNo.value)
// this.barId = "";
}
});
},

这是vue的代码 分别打印了3次input的value值，第一次console能获取到整个input包括里面的value也是有输入框中的值，第二个console的结果为一个null，第三次console却能够打印出value。觉得不太理解，vue文档今天不知道为什么打不开，所以想问一下大佬是什么原因需要怎么解决？谢谢

【Vue】想问一下大佬关于vue ref获取input值的问题？

回答

不要这样用。ref不是响应式的，之所以第3个有值是因为BarCode: this.barId触发了get进行了依赖收集。
应该改成watch。

可以直接获取barId的值

正常情况第二个console.log是可以打印出value的，应该是其他地方有错，我按照你的代码是可以输出的

以上是 【Vue】想问一下大佬关于vue ref获取input值的问题？ 的全部内容， 来源链接： utcz.com/a/81979.html

回到顶部