想请问下 vue 动态下拉框如何取到 value 值

[xiaohantx]

如图这样，是在前面 select 变动到时候后面的一个标签能取到前面 select 的 value 值

[lupkcd]

https://cn.vuejs.org/v2/guide/forms.html#%E9%80%89%E6%8B%A9%E6%A1%86

[xiaohantx]

@lupkcd #1 这里是绑定 v-model，赋予一个指定的变量绑定起来，但是这里 select 框是动态生成的，可能 1 个也可能有 100 个甚至更多，v-model 该怎么操作😳

[loading]

为啥不去基于 vue.js 的 ui 库抄一个呢？

[ironMan1995]

data 里面定义一个空对象 values:{}，vmodel 绑定这个对象具体值，例如 values.name values.age ，注意 data 中没有具体定义这些，你选择了 select 后，values 对象自动会有这些值了，后面写个{{ values.name }}就取出来值了。这个 key 定义就用要传给后端接口的 key 定义

[ironMan1995]

你这根据接口返回数据动态生成多个 select，不如就如这个动态数据对象的 key，{name:[optionsDataArray],age:[optionsDataArray]} 又拿到要渲染的下拉框数组，又能用这个 key 当 select 的 vmodel，完事直接把 values 对象传给后端接口，美滋滋

[xiaohantx]

@loading #3 主要也没找到，太少了。。。这是人家提的需求...

[xiaohantx]

@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 好像是

[xiaohantx]

@ironMan1995 #5 我使用 change 想读取一下 v-model 值时候报了个错 Error in v-on handler: "TypeError: originalEvents[key].apply is not a function"

[xiaohantx]

```
md 不可以用了吗。。
```

[TomVista]

$ref.value 或者 vm.value,

[lupkcd]

没影响，v-model 其实是触发了 input 事件。 同理，你界面只要有选择的事件 就能拿到对应的值

[xiaohantx]

@lupkcd 我上面这边是按照前面提供方法用了 v-model，但是 change 事件中 console.log(this.getSelect)报错了，是我取的方式不对吗，看上去你们两说的应该是一种方法

[loading]

真的不去现成 ui 库抄一个？我是指你去 ui 库抄 select 的实现。

[ironMan1995]

你都用了 v-decorator，这个哪个 ui 的组件我不知道，但是在 ant design vue 中使用这个 v-decorator 就添加双向绑定功能，你 v-model 没用，只能用 this.form.getFieldsValue 获取值，你看看你用的 ui 组件官方文档

[randyo]

你弄个在线 codepenel 的 demo 吧

[xiaohantx]

@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 位手机号码'
}
},
```