现象:在输入框输入信息后,控件右侧会出现叉子,正常来说,点击后,可以清空输入的信息。但点击后无效。
分析:出现这个问题,比对了之前写过的代码,之前的代码可以清空,但就这个页面不行,奇怪了,比对了相关代码,没有出入。
解决:最后原因是在控件中定义的v-model绑定的变量。
示例代码:
<template>
<u-form-item label="联系人" label-width="200rpx">
<u-input v-model="contactor" laceholder="请输入联系人" maxlength="50"/>
</u-form-item>
<u-form-item label="联系电话" label-width="200rpx">
<u-input v-model="contactPhone" laceholder="请输入联系电话" maxlength="50"/>
</u-form-item>
</template>
只是这么定义是不行的,需要在script中定义contactor和contactPhone的变量才行。
代码如下:
export default {
data() {
return {
contactor:null,
contactPhone:null,
}
}
}
如此定以后,u-input控件右侧的叉子按钮即可生效。