一.其实官方文档写的挺详细了。这个拿来记录一下。
例如,当我们前端想获取选择框上面文字时,要怎么处理
,根据官网,使用watch:
页面中使用
实际测试一下,
这个是我的Vue前端页面
我选中的
看一下控制台,
key的话,是我动态绑定的主键。
这里根据官网来写就好了,这里面注意一下,watch不是写在methods里面的。重新另起一个方法就好了。
二,还有第二种方式,也是官方提供的。这个需要写在methods里面了。
1.例如:官网的例子,
2. 控制台得到一个对象。
三.拿个实际例子来讲吧。
例如:vue前端页面
然后在 methods 里面添加以下方法
看看控制台,是不是一个对象
对吧,一般对象的话,直接使用value.label,这样值不就出来了吗?
如果这样点的话,得到的是一个undefinde ,没有找到。
由于本人理解比较肤浅,没有去深入了解是为什么。知道的可以留言,互相学习。
各种坑,各种百度都找了,后来发现,快到山穷水尽的时候,灵光一现,试试vue提供的循环
果然,还真获取对象的值了。
页面数据
打开控制台
这样就获取到实际的值了。
最开头的例子,也一样的道理,直接使用循环即可取出数据
页面
控制如输出
前端代码:
四.最后,再教一个小技巧,要学会看官网的文档,使用API
1、比如,我想实现一个功能,当两个选项都没有选的时候,提交按钮是禁用的状态,那这个事件就要触发一个事件,一个选择框值发生变化时的事件。
2、首先第一步是查看官网的API
选择器 Select - Ant Design Vue (antdv.com)
3、使用一个例子来实现
步骤一,定义两个接收的选中框内容的属性
步骤二,给属性分别赋值,
步骤三,我先看控制台是否可以正常赋值
前端页面选择
查看控制台,能正常有值,说明赋值是成功了。
步骤四,根据官网API,我们需要定义一个change 事件
步骤五,实现事件里面的方法,这个方法写在methods 里面
步骤六,在提交按钮里面添加一个属性判断,disabled
这样就可以了。页面刚开始加载的时候,那两个属性的值是空的,所以是禁用的状态。
选择了值后,就恢复状态。一旦选择框的值清空,就把这两个属性赋一个空值 ,这样就又变成了
禁用的状态了,功能就实现了