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

[0Kelvin]

老大说 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 点击就没有反应， checkVal 和 update 都没进。更没有把点的 radio 值绑定到 s 上了。

[0Kelvin]

凉了凉了。看样子是问题太弱，没大佬感兴趣呢= =

[EridanusSora]

:selected="s"

s 是啥？

然后用 v-for 的话不加 key Vue2.x 会报错的啊，你这肯定一堆报错了感觉...先看看报错吧

[wkan]

看到这个 alert ……你一定没有看这开发者工具调试

[cornelia]

<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]

基于你的思路我改成这样：[https://jsfiddle.net/5wrrLp0r/]( https://jsfiddle.net/5wrrLp0r/)

[0Kelvin]

@EridanusSora s 是父组件的属性

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

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

@lxy42 多谢大佬，解决了所有问题

[wxsm]

这种问题建议到 stackoverflow 提问，国外雷锋速度非常快。质量一般也很高。

[0Kelvin]

@wxsm 英语是硬伤啊。好久没写了，看看还行 Orz