问题描述:
今天出现一个问题,业务是有一个身份证码输入框:
当光标移出这个输入框后,需要拿这个证件号去库里查到用户信息,如果用户表里有用户信息,就把下面待输入的名字、电话号码输入框进行预填入。
身份证输入框代码如下:这里可以给这个输入框注册一个光标移出事件handleNewUserBlur
<el-form-item label="用户证件号码" prop="newCarownerIdcard"><el-input v-model="form.newCarownerIdcard" placeholder="请输入用户证件号码"@blur="handleNewUserBlur"/>
</el-form-item>
methods里面写:
newUserPhone(event) {//在这里处理光标移出事件的逻辑const idCard=this.form.newUserIdcard;console.log('用户证件号码输入框光标移出,idCard为--->'+idCard);if(!idCard){return;}// 用证件号带出的新用户信息数据getUserByIdcard(idCard).then(response => {const newUser = response.data;if(newUser){this.form.newUserName=newUser.name;this.form.newUserPhone=newUser.phone;console.log('查到新用户姓名newUserName--->'+this.form.newUserName);console.log('查到新用户电话newUserPhone--->'+this.form.newUserPhone);}else{console.log('未查到新用户');}});},
这里两句打印明明已经可以输出form里面的数据了,但输入框却不做响应式处理
解决办法:
因为这是在异步操作或动态添加属性时赋值,所以可以尝试用.$set来赋值
代码:
newUserPhone(event) {//在这里处理光标移出事件的逻辑const idCard=this.form.newUserIdcard;console.log('用户证件号码输入框光标移出,idCard为--->'+idCard);if(!idCard){return;}// 用证件号带出的新用户信息数据getUserByIdcard(idCard).then(response => {const newUser = response.data;if(newUser){//this.form.newUserName=newUser.name; this.$set(this.form, 'newUserName', newUser.name);//this.form.newUserPhone=newUser.phone;this.$set(this.form, 'newUserPhone', newUser.phone);console.log('查到新用户姓名newUserName--->'+this.form.newUserName);console.log('查到新用户电话newUserPhone--->'+this.form.newUserPhone);}else{console.log('未查到新用户');}});},