1、问题举例描述：

radio-group 标签组设置默认选择checked: ‘true’，选择了单选按钮的非默认选项（场外），再点击其他的选择（手续费率），单选按钮又会变成默认的选项（场内）
默认状态如下：

基金类型选择非默认选项「场外」

但是点击选择完手续费率之后，基金类型又变成了场内

2、目前代码如下

<template>
  <div class="row">
    <label class="label">基金类型：</label>  
    <radio-group class="radio-group" @change="radioChange">
      <label class="radio" v-for="(item, index) in items" :key="item.name">
        <radio color='#EA5A49' :value="item.name" :checked="item.checked"  /> {{item.value}}
      </label>
    </radio-group>

    <label class="label">手续费率：</label>
    <picker
      mode="multiSelector"
      @change="bindMultiPickerChange"
      :value="multiIndex"
      :range="multiArray"
    >
    <view class="picker">
      {{multiArray[0][multiIndex[0]]}} {{multiArray[1][multiIndex[1]]}}
    </view>
    </picker>
  </div>
</template>

<script>
  created () {
    as_type: 1
  },
  data () {
    return {
      items: [
        {name: 1, value: '场内',checked: 'true'},
        {name: 2, value: '场外'}
      ],
      multiIndex: [0,0],
      multiArray: [['万', '千'], [1, 0.5, 0.6, 1.5, 2, 2.5, 3, 3.5, 4, 4.5, 5]]
    }
  }
  methods: {
    radioChange (e) {
      this.as_type = e.target.value
    }
  }
</script>

3、问题分析及解决

出现这个问题的原因是vue里面，每次页面data 的属性的值发生改变时，视图会根据data 里面的值进行重渲染。

所以，我们在选择手续费率之后，data里面的值multiIndex会发生改变，系统就会根据data 里面的值重新渲染视图。所以根据items数组，第一个选项{name: 1, value: ‘场内’,checked: ‘true’}中checked为true，渲染之后，页面上单选按钮的第一个选项（即场内）又会被选择。

我们根据这个思路来解决问题。

根据上面的代码可以看出每次点击基金类型单选按钮，都会触发radioChange方法，我们在这个方法中加入下列代码，表示每次点击单选按钮，都将items数组中checked: 'true’数据对应到选择的选项上面。

radioChange (e) {
  this.as_type = e.target.value
  if(this.as_type === '2'){
    this.items[1].checked = 'true'
  }else{
    this.items[1].checked = ''
  }
  console.log('this.as_type',this.as_type)
}

这样问题就解决了。

4、问题扩展

每次页面data的属性的值发生改变，视图会根据data里面的值重新进行渲染
因为这个原因，data里面不能定义随着单选按钮的的改变而变化的属性值。比如上面代码中的as_type。如果定义在data里面，会出现下面的问题
【mpvue】radio-group 标签组 点击两次 label才可以选中状态

所以不要将随着单选按钮的的改变而变化的属性值定义在data里面，建议定义在 created () 中