u-input控件右侧的叉子失效问题解决

现象:在输入框输入信息后,控件右侧会出现叉子,正常来说,点击后,可以清空输入的信息。但点击后无效。

分析:出现这个问题,比对了之前写过的代码,之前的代码可以清空,但就这个页面不行,奇怪了,比对了相关代码,没有出入。

解决:最后原因是在控件中定义的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控件右侧的叉子按钮即可生效。

猜你喜欢

转载自blog.csdn.net/wjw_java/article/details/126265635
今日推荐