Ant for Vue - input、select组件placeholder无法显示
最近项目中引入蚂蚁金服的 Ant 框架,以上来就遇到一个奇葩问题。下图是局部截图以下是代码部分<a-select v-model="searchFrom.sbcs" placeholder="请选择设备厂商" notFoundContent="暂无数据" @change="selectFirm"><a-select-option v-for="item ...
·
最近项目中引入蚂蚁金服的 Ant 框架,以上来就遇到一个奇葩问题。
下图是局部截图
以下是代码部分
<a-select v-model="searchFrom.sbcs" placeholder="请选择设备厂商" notFoundContent="暂无数据" @change="selectFirm">
<a-select-option v-for="item in firm" :key="item.code" :value="item.code">{{item.name}}</a-select-option>
</a-select>
其他无关代码省略 ...
data: {
searchFrom: {
sbcs: '',
},
},
问题描述
见上面代码中,select组件同时绑定了v-model和placeholder,且data中初始化"sbcs"的值为空。
当v-model绑定data中属性为空时,select绑定的placeholder属性不显示,删除data中的sbcs属性时,placeholder属性可显示
解惑
placeholder是当前组件值为空时显示的替换文本,只有值为空的时候才会显示。当组件绑定了v-model且绑定值初始化时,值不再是空,即时初始化值为’'也视为有值,所以placeholder自然就不会显示。
经过我查阅github的其他网友留言,得到一个结论,在Ant中如果不进行初始化,那么值就是undefined,此时可显示placeholder
以上为本人开发中一些经验,如有错误请各位网友不吝指教。
更多推荐
已为社区贡献9条内容
所有评论(0)