【mpvue】radio-group 标签组设置默认选择checked: 'true',选择了单选按钮的非默认选项,再点击其他的选择,单选按钮又会变成默认的选项

简介: 1、问题举例描述:radio-group 标签组设置默认选择checked: ‘true’,选择了单选按钮的非默认选项(场外),再点击其他的选择(手续费率),单选按钮又会变成默认的选项(场内)默认状态如下:

1、问题举例描述:


radio-group 标签组设置默认选择checked: ‘true’,选择了单选按钮的非默认选项(场外),再点击其他的选择(手续费率),单选按钮又会变成默认的选项(场内)

默认状态如下:


image.png


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


image.png


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


image.png


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


目录
相关文章
|
2月前
单选框设置默认选中
单选框设置默认选中
46 1
|
4天前
Element UI 多选表格--判断勾选数据行的 Checkbox 时为选中还是取消选中
Element UI 多选表格--判断勾选数据行的 Checkbox 时为选中还是取消选中
11 1
|
8月前
|
JavaScript
JS设置select下拉框默认选中
JS设置select下拉框默认选中
|
8月前
vxe-table可编辑状态默认显示下拉选select为默认展示
vxe-table可编辑状态默认显示下拉选select为默认展示
|
11月前
Ant Design:Radio.Group单选组合与Select下拉选项两种添加子组件选项的语法
Ant Design:Radio.Group单选组合与Select下拉选项两种添加子组件选项的语法
147 0
uiu
|
安全
【Svelte】-(6)绑定|input 输入框 / group 复选框绑定 / textarea 输入框 / select 绑定 / contenteditable 属性绑定
【Svelte】-(6)绑定|input 输入框 / group 复选框绑定 / textarea 输入框 / select 绑定 / contenteditable 属性绑定
uiu
255 0
【Svelte】-(6)绑定|input 输入框 / group 复选框绑定 / textarea 输入框 / select 绑定 / contenteditable 属性绑定
html+css实战34-单选功能和默认选中
html+css实战34-单选功能和默认选中
111 0
html+css实战34-单选功能和默认选中
【Layui】关于单选框的选中状态,下拉框默认显示
【Layui】关于单选框的选中状态,下拉框默认显示
612 0
【Layui】关于单选框的选中状态,下拉框默认显示
|
JavaScript
jQuery设置下拉框select 默认选中option
$("#id option:first").prop("selected", 'selected');  将请选择加入到select中第一位 $("#id").
1566 0
【mpvue】radio-group 标签组 点击两次 label才可以选中状态
1.问题复现 用 radio-group 标签组实现单选功能,点击两次才可以使 label 呈现选中状态,但是e.target.value 的值已经发生变化了。
274 0