a-select 使用v-model双向绑定，选中值为空时候，placeholder不生效

最新推荐文章于 2024-06-20 09:46:43 发布
最新推荐文章于 2024-06-20 09:46:43 发布
阅读量1.6k 收藏
点赞数 3
分类专栏： ant-design-vue 文章标签： ant-design-vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/shadow_yi_0416/article/details/125663954
版权
在Ant Design Vue的a-select表单组件中遇到一个问题，当绑定的值为空字符串时，占位符（placeholder）不显示。通过研究发现，将值设为undefined可以解决这个问题。这样做成功地让placeholder在值为空时正常显示。
摘要由CSDN通过智能技术生成

最近做项目，用到了ant-design-vue，在使用表单组件下拉框a-select 的时候。发现当绑定值为“”时候，placeholder没有生效。

 

后来经过多方查询，了解到，使用v-modle的时候，应该把值设置为undefined。

this.product = undefined

 成功解决了当值为空时候，placeholder不显示的问题

 

小影_8978
关注
专栏目录
element-ui日期选择控件 IE11 赋值不显示 placeholder
siwangdexie_copy的博客
05-08 2605
背景： 给日期赋默认值，在IE11，不显示。 <el-date-picker v-model="value1" type="date" placeholder="选择日期"> </el-date-picker> data(){ return { value1:"2019-05-08" } } 解决方法： 删掉 placeholder，新增...
Ant design vue中的a-select在动态给option赋值之后，placeholder失效
丑小鸭变黑天鹅的博客
11-29 4763
Ant design vue中的a-select在动态给option赋值之后，placeholder失效一、问题描述二、解决办法 一、问题描述 最近做一个项目，用到了a-select，placeholder出现了问题 先看一下不起作用的代码 <a-col :md="8" :sm="24"> <a-form-item label="学院" :labelCol="{ span: 6 }" :wrapperCol="{ span: 15, offset: 1 }
Ant Design of Vue （2）使用a-select 获取选择框数据
热门推荐
build2024
09-11 1万+
其实官方文档写的挺详细了。这个拿来记录一下。 例如，当我们前端想获取选择框上面文字时，要怎么处理 ，根据官网，使用watch： 页面中使用 实际测试一下， 这个是我的Vue前端页面 我选中的 看一下控制台， key的话，是我动态绑定的主键。 这里根据官网来写就好了 ...
Ant design Vue3 中的 a-select 组件使用方法详解
最新发布
weixin_45653441的博客
06-20 1934
placeholder 只有在 value = undefined 才会显示，对于其它的 null、0、‘’ 等等对于 JS 语言都是有意义的值。使用 change方法 该方法有俩个参数 value option（选中当前的对象的所有数据）正常选中的时候 只会获取到value值 如果要获取该数据的其他数值， 例如 id name 等等。a-select 搜索时过滤对应的 option 属性的value。组件中返回值为value和label的List可直接使用搜索。好了XDM，bye~~~
解决当v-model默认为空时placeholder不显示的问题
aa754403560的博客
04-01 1243
<a-select v-model='a' placeholder="请选择" > data() { return { a:'' }; }, 当设置v-model默认为空的时候，不能显示出placeholder设置的提示信息。 解决方案是将a设置为undefined。
解决ant-design-vue中Select组件v-model值为空字符串不显示placeholder的bug
weixin_44441196的博客
11-28 1324
搜索renderPlacehoder方法将其修改为。
antd a-select绑定数据
program_ape_lqh的博客
10-18 2416
绑定数据通过:options属性绑定一个数组。label是显示的内容。value是选中的值。
AntDesign的select组件placeholder不显示问题
mrsun_web
09-13 1094
问题：select组件同时绑定了v-model和placeholder，select绑定的placeholder属性不显示。 <a-select v-model="level" placeholder="选择日志级别"> <a-select-option value="info">1</a-select-option> <a-select-option value="warn">2</a-select-opti
Vuejs学习笔记之使用指令v-model完成表单的数据双向绑定
10-17
复选框可以使用`v-model`和`value`属性绑定一个数组，表示选中的值集合： ```html <input type="checkbox" v-model="checkedColors" value="red"> 红色 <input type="checkbox" v-model="checkedColors" value=...
Ant design vue中的a-select在动态给option赋值之后，placeholder失效.pdf
12-16
这可能是因为在数据加载完成之前，`a-select`已经初始化，而此时`v-model`绑定的值为空字符串。 二、解决办法 1. 方法一（不推荐） 一种解决方案是在初始化数据时，将`receiveAcademy`设置为`undefined`而不是空...
elementUI select组件默认选中效果实现的方法
10-17
`el-select`组件的`v-model`绑定的值是当前被选中的`el-option`的`value`属性。这意味着你需要将你想要默认选中的选项的`value`值与`v-model`绑定的变量相匹配，以实现选中效果。 在HTML模板中，`el-select`组件...
vue中v-model对select的绑定操作
11-19
1、单选时
vue项目中使用element-ui下拉框选项值为对象时报错
ZJW222的博客
08-23 1956
在做后台管理时，使用了vue搭配elementUI，请求方法使用了axios插件，在使用下拉框时，因为我需要获取选中的选项中的其他值，因此需要传入对象。对select下拉框的文档没有读的很仔细，百度过几篇文章，也没有理解他们表达的意思，然后自己又去看文档，把他的属性看了几遍，忽然就来了灵感，尝试了一两次，哇，原来是这样做，爽歪歪，真的是书读百遍其义自见 1.elementui中的select下拉...
a-select下拉选择框不出现placeholder值的问题
热爱我的热爱
10-23 272
ref时要写business_id: null, 不能写business_id: ‘’,
ant design vue a-select v-modal及value、key均绑定id，但是模糊查询时需以其他字段如中文匹配的方法
SZHFCLXX的博客
07-06 559
加个属性及对应方法即可。
select 绑定值
zhuxueliao的专栏
06-26 1071
var selectValue = $('#jiancezhouqis').val(); //隐藏域                       var t1 = document.getElementById("jiancezhouqi");             for (i = 0; i                 if (selectValue == t1.opti
解决ant-design中＜a-select＞怎么显示不了placeholder中默认值的解决方法
m0_64601465的博客
12-27 1194
首先这个v-model的值是searchBody[column.key]，如果想要显示其placeholder的默认值在select组件中显示，v-mode绑定的初始值，也就是刚进页面的值为null或者undefined才可以，不能为’'空字符串，要不然显示不了默认值。
a-select vModel时placeholder不显示问题
成长的博客
06-18 640
问题描述：select 组件绑定了v-model和placeholder，v-model的value默认值为空字符串或者null时，select组件的placeholder属性不显示。placeholder是当前组件值为空时显示的替换文本，只有值为空的时候才会显示。因为在ant-design-vue中，当组件绑定了v-model且绑定值初始化时，值不再是空，即时初始化值为’'也视为有值，所以placeholder自然就不会显示。其实两个方案是一个原理，初始化成undefined未定义就好啦。
value为空时，不显示placeholder
wuhe1060134228的博客
04-12 870
前端或小程序中input组件中，value为空时，显示为空。 空在组件里面代表有值，如果想显示placeholder，需要判断当value为空时设置为undefined，就可以显示placeholder了。
Vue.js实战：v-model深度解析与表单元素双向绑定
"本文详细介绍了Vue.js中的v-model指令及其在绑定表单元素中的应用，通过实例代码展示了如何实现双向数据绑定，包括文本输入框和大文本输入框的使用，并提醒了注意事项，如表单控件的值仅依赖于绑定的数据，以及如何...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值