【mpvue】radio-group 标签组 点击两次 label才可以选中状态

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/shine_a/article/details/87958818

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
}