V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX 提问指南
xiaohantx
V2EX  ›  问与答

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

  •  
  •   xiaohantx · 2020-03-26 11:37:10 +08:00 · 2685 次点击
    这是一个创建于 1695 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

    16 条回复    2020-03-26 14:46:23 +08:00
    xiaohantx
        2
    xiaohantx  
    OP
       2020-03-26 12:14:54 +08:00
    @lupkcd #1 这里是绑定 v-model,赋予一个指定的变量绑定起来,但是这里 select 框是动态生成的,可能 1 个也可能有 100 个甚至更多,v-model 该怎么操作😳
    loading
        3
    loading  
       2020-03-26 12:20:15 +08:00 via Android
    为啥不去基于 vue.js 的 ui 库抄一个呢?
    ironMan1995
        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 定义
    ironMan1995
        5
    ironMan1995  
       2020-03-26 13:00:50 +08:00 via Android
    你这根据接口返回数据动态生成多个 select,不如就如这个动态数据对象的 key,{name:[optionsDataArray],age:[optionsDataArray]} 又拿到要渲染的下拉框数组,又能用这个 key 当 select 的 vmodel,完事直接把 values 对象传给后端接口,美滋滋
    xiaohantx
        6
    xiaohantx  
    OP
       2020-03-26 13:34:39 +08:00
    @loading #3 主要也没找到,太少了。。。这是人家提的需求...
    xiaohantx
        7
    xiaohantx  
    OP
       2020-03-26 14:02:48 +08:00
    @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
        8
    xiaohantx  
    OP
       2020-03-26 14:03:27 +08:00
    @ironMan1995 #5 我使用 change 想读取一下 v-model 值时候报了个错 Error in v-on handler: "TypeError: originalEvents[key].apply is not a function"
    xiaohantx
        9
    xiaohantx  
    OP
       2020-03-26 14:07:35 +08:00
    ```
    md 不可以用了吗。。
    ```
    TomVista
        10
    TomVista  
       2020-03-26 14:08:19 +08:00
    $ref.value 或者 vm.value,
    lupkcd
        11
    lupkcd  
       2020-03-26 14:13:03 +08:00
    没影响,v-model 其实是触发了 input 事件。 同理,你界面只要有选择的事件 就能拿到对应的值
    xiaohantx
        12
    xiaohantx  
    OP
       2020-03-26 14:18:38 +08:00
    @lupkcd 我上面这边是按照前面提供方法用了 v-model,但是 change 事件中 console.log(this.getSelect)报错了,是我取的方式不对吗,看上去你们两说的应该是一种方法
    loading
        13
    loading  
       2020-03-26 14:18:46 +08:00 via Android
    真的不去现成 ui 库抄一个?我是指你去 ui 库抄 select 的实现。
    ironMan1995
        14
    ironMan1995  
       2020-03-26 14:20:01 +08:00
    你都用了 v-decorator,这个哪个 ui 的组件我不知道,但是在 ant design vue 中使用这个 v-decorator 就添加双向绑定功能,你 v-model 没用,只能用 this.form.getFieldsValue 获取值,你看看你用的 ui 组件官方文档
    randyo
        15
    randyo  
       2020-03-26 14:23:42 +08:00 via Android
    你弄个在线 codepenel 的 demo 吧
    xiaohantx
        16
    xiaohantx  
    OP
       2020-03-26 14:46:23 +08:00
    @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 位手机号码'
    }
    },
    ```
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2854 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 30ms · UTC 13:38 · PVG 21:38 · LAX 05:38 · JFK 08:38
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.