1.问题复现
用 radio-group 标签组实现单选功能，点击两次才可以使 label 呈现选中状态，但是e.target.value 的值已经发生变化了。
<template> <radio-group @change="radioChange"> <label v-for="(item, index) in items" :key="item.name"> <radio :value="item.name" :checked="item.checked" /> {{item.value}} </label> </radio-group> </template> <script> export default { data () { return { as_type:1, items: [ {name: '1', value: '场内',checked: 'true'}, {name: '2', value: '场外'} ] } }, methods: { radioChange (e) { console.log('ee',e.target.value) this.as_type = e.target.value console.log('this.as_type',this.as_type) } } } </script>
2、问题解决
出现这个问题的原因是因为as_type变量在data()中做了双向绑定，我们不应该在data()中定义的as_type，应该在created()中定义。像下面这样，其他地方不需要修改
created () { as_type: 1 }, data () { return { items: [ {name: '1', value: '场内',checked: 'true'}, {name: '2', value: '场外'} ] } }
这样解决会有一个缺点，如果直接使用默认的选择，没有点击单选按钮，那么as_type不会被初始化，是一个undefined的值，所以我们使用as_type时需要先判断一下as_type是不是未定义的，如果是的话，附上默认值。像下面这样
const data = { as_type: this.as_type? this.as_type : 1 }
