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 () 中