如图这样,是在前面 select 变动到时候后面的一个标签能取到前面 select 的 value 值
1
lupkcd 2020-03-26 11:51:59 +08:00
|
2
xiaohantx OP @lupkcd #1 这里是绑定 v-model,赋予一个指定的变量绑定起来,但是这里 select 框是动态生成的,可能 1 个也可能有 100 个甚至更多,v-model 该怎么操作😳
|
3
loading 2020-03-26 12:20:15 +08:00 via Android
为啥不去基于 vue.js 的 ui 库抄一个呢?
|
4
ironMan1995 2020-03-26 12:57:21 +08:00 via Android
data 里面定义一个空对象 values:{},vmodel 绑定这个对象具体值,例如 values.name values.age ,注意 data 中没有具体定义这些,你选择了 select 后,values 对象自动会有这些值了,后面写个{{ values.name }}就取出来值了。这个 key 定义就用要传给后端接口的 key 定义
|
5
ironMan1995 2020-03-26 13:00:50 +08:00 via Android
你这根据接口返回数据动态生成多个 select,不如就如这个动态数据对象的 key,{name:[optionsDataArray],age:[optionsDataArray]} 又拿到要渲染的下拉框数组,又能用这个 key 当 select 的 vmodel,完事直接把 values 对象传给后端接口,美滋滋
|
7
xiaohantx OP @ironMan1995 #4 这里还用到了 form
``` <a-form-item class="item" v-if="type === '1'" v-for="(k,index) in form.getFieldValue('keys')" :key="index" :label="index === 0 ? '变量属性' : ''"> <a-row type="flex"> <a-col style="margin-right:30px;">{{ k }}</a-col> <a-col> {{ k.initialValue }} <a-select @change="onChange" v-model="getSelect" v-decorator="['select-'+index, { initialValue:'0',rules: [{ message: '请选择对应属性' }] }]" style="width: 300px"> <a-select-option value="0">电话号码</a-select-option> <a-select-option value="1">时间</a-select-option> <a-select-option value="2">金额</a-select-option> <a-select-option value="3">其他号码(目前支持订单号,用户名等中英文数字组合)</a-select-option> </a-select> </a-col> </a-row> </a-form-item> ``` v-model 好像是 |
8
xiaohantx OP @ironMan1995 #5 我使用 change 想读取一下 v-model 值时候报了个错 Error in v-on handler: "TypeError: originalEvents[key].apply is not a function"
|
9
xiaohantx OP ```
md 不可以用了吗。。 ``` |
10
TomVista 2020-03-26 14:08:19 +08:00
$ref.value 或者 vm.value,
|
11
lupkcd 2020-03-26 14:13:03 +08:00
没影响,v-model 其实是触发了 input 事件。 同理,你界面只要有选择的事件 就能拿到对应的值
|
12
xiaohantx OP @lupkcd 我上面这边是按照前面提供方法用了 v-model,但是 change 事件中 console.log(this.getSelect)报错了,是我取的方式不对吗,看上去你们两说的应该是一种方法
|
13
loading 2020-03-26 14:18:46 +08:00 via Android
真的不去现成 ui 库抄一个?我是指你去 ui 库抄 select 的实现。
|
14
ironMan1995 2020-03-26 14:20:01 +08:00
你都用了 v-decorator,这个哪个 ui 的组件我不知道,但是在 ant design vue 中使用这个 v-decorator 就添加双向绑定功能,你 v-model 没用,只能用 this.form.getFieldsValue 获取值,你看看你用的 ui 组件官方文档
|
15
randyo 2020-03-26 14:23:42 +08:00 via Android
你弄个在线 codepenel 的 demo 吧
|
16
xiaohantx OP @ironMan1995 通过 getFieldValue 已经解决了~
``` getText (index) { const type = Number(this.form.getFieldValue('select-' + index)) switch (type) { case 0: return '手机号码 11 位手机号码' case 1: return '金额 小数点后最多 4 位 例如 88888.8888' case 2: return '时间 支持 YYYYMMDD,YYYY-MM-dd,YYYY/MM/dd,YYYY-MM-dd HH:mm:ss,YYYY/MM/dd HH:mm:ss 格式的时间类型' case 3: return '其他号码(例如订单号) 仅支持纯英文,纯数字或者混合类型' default: return '手机号码 11 位手机号码' } }, ``` |