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
}
Logo

前往低代码交流专区

更多推荐