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

[Vue] 自定义 Radio 组的取值相关问题

  •  
  •   0Kelvin · 2017-11-29 17:04:46 +08:00 · 3914 次点击
    这是一个创建于 2585 天前的主题,其中的信息可能已经有所发展或是发生改变。

    老大说 select 不方便。让我改成 radio 组的样子,然而我是个前端菜鸡(T-T)。跪求大佬解答 Orz

        var temp = '<label class="btn btn-default" :for="id">{{ name }}'
                 + '<input :id="id" type="radio" :value="id" :checked="checkVal" @change="update"></label>';
        Vue.component('radio-tag', {
            template: temp,
            model:{
                prop: 'modelVal',
                event: 'change'
            },
            props: {
                id: String, 
                name: String,
                selected: String,
                modelVal: ''
            },
            computed: {
                checkVal () {
                    alert('check');
                    return this.modelVal = this.id;
                }
            },
            methods: {
                update() {
                    alert('update');
                    this.$emit('change', this.modelVal);
                }
            }
        });
    
    <div class="btn-group" data-toggle="buttons">
       <radio-tag v-for="item in items" :id="item.id" :name="item.name" :selected="s" v-model="s"></radio-tag>
    </div>
    

    radio 点击就没有反应, checkValupdate 都没进。更没有把点的 radio 值绑定到 s 上了。

    8 条回复    2017-11-29 23:23:36 +08:00
    0Kelvin
        1
    0Kelvin  
    OP
       2017-11-29 17:26:41 +08:00
    凉了凉了。看样子是问题太弱,没大佬感兴趣呢= =
    EridanusSora
        2
    EridanusSora  
       2017-11-29 18:21:38 +08:00
    :selected="s"

    s 是啥?

    然后用 v-for 的话不加 key Vue2.x 会报错的啊,你这肯定一堆报错了感觉...先看看报错吧
    wkan
        3
    wkan  
       2017-11-29 18:26:22 +08:00 via iPhone
    看到这个 alert ……你一定没有看这开发者工具调试
    cornelia
        4
    cornelia  
       2017-11-29 18:33:24 +08:00
    <input type="radio" value="1" v-model="type" id="type-1"> <label class="cur-p" for="type-1" style="text-align: left;">type-1</label>
    <input type="radio" value="2" v-model="type" id="type-2"> <label class="cur-p" for="type-2" style="text-align: left;">type-1</label>
    我是这样写的
    lxy42
        5
    lxy42  
       2017-11-29 18:37:23 +08:00   ❤️ 1
    基于你的思路我改成这样:[https://jsfiddle.net/5wrrLp0r/]( https://jsfiddle.net/5wrrLp0r/)
    0Kelvin
        6
    0Kelvin  
    OP
       2017-11-29 19:16:44 +08:00
    @EridanusSora s 是父组件的属性

    @wkan 没有。后来改成控制台打印了。

    @cornelia 好像跟我的需求不太一样

    @lxy42 多谢大佬,解决了所有问题
    wxsm
        7
    wxsm  
       2017-11-29 20:49:54 +08:00 via iPhone
    这种问题建议到 stackoverflow 提问,国外雷锋速度非常快。质量一般也很高。
    0Kelvin
        8
    0Kelvin  
    OP
       2017-11-29 23:23:36 +08:00 via Android
    @wxsm 英语是硬伤啊。好久没写了,看看还行 Orz
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2795 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 33ms · UTC 07:51 · PVG 15:51 · LAX 23:51 · JFK 02:51
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.