bug-Ant中a-select的placeholder不生效(绑定默认值为undefined)

1.问题

Ant中使用a-select下拉框时,placeholder设置输入框显示默认值提示,vue2+ant

null与undefined在js中明确的区别:

  • **null:**一个值被定义,定义为"空值"
  • **undefined:**根本不存在定义

2.解决

2.1 a-select使用v-model绑定值

问题代码

html 复制代码
<a-form-model-item>
    <a-select  v-model="ScoreType" placeholder="请选择"  @select="Change">
	</a-select>
</a-form-model-item>
javascript 复制代码
 data(){
     return{
	    ScoreType: null,
     }
   }

v-model绑定的默认值为null,绑定了placeholder,并未显示默认提示,null值默认为空,顶替了placeholder提示。

更改v-model绑定值为undefined

javascript 复制代码
 data(){
     return{
	    ScoreType: undefined,
     }
   }
2.2 a-select中使用 :valueAPI(三元判断值为null设定为undefined)
html 复制代码
<a-form-model-item>
    <a-select  :valse="ScoreType ? ScoreType : undefined" placeholder="请选择"  @select="Change">
	</a-select>
</a-form-model-item>
javascript 复制代码
 data(){
     return{
	    ScoreType: undefined,
     }
   }

3.总结

在Vue2使用AntDesign的a-select组件时,若要显示默认提示,需注意v-model的初始值。当绑定值设为undefined,placeholder才会显示。使用AntDesign的a-select组件时value属性结合三元运算符处理。

相关推荐
十步杀一人_千里不留行17 小时前
和 AI 一起修 Bug 心得体会
人工智能·bug·ai编程
花王江不语18 小时前
改bug的一些体会
bug
zimoyin19 小时前
Linux 程序使用 STDOUT 打印日志导致程序“假死”?一次线上 Bug 的深度排查与解决
linux·运维·bug
城下秋草2 天前
趣谈Bug -500英里邮件问题
bug
初圣魔门首席弟子2 天前
c++中this指针使用bug
前端·c++·bug
张较瘦_2 天前
[论文阅读] AI + 软件工程(Debug)| 告别 “猜 bug”:TreeMind 用 LLM+MCTS 破解 Android 不完整报告复现难题
论文阅读·人工智能·bug
数字芯片实验室2 天前
芯片验证:发现BUG是件好事
bug
南方者2 天前
【JAVA】【BUG】经常出现的典型 bug 及解决办法
java·oracle·bug
十铭忘3 天前
Bug——PaddleX人脸识别报错:Process finished with exit code -1073741819 (0xC0000005)
学习·bug
一勺-_-4 天前
疑问:hfish的一个bug,很奇怪
bug