vue van-radio更改选择后绑定的变量值改变了,但是样式上没有选中

原因绑定的变量未在data中声明(vue2是用过Object.defineProperty实现数据响应式,vue只对放在data里的变量做响应式处理)

情况一: vue的data里未声明绑定的变量

<template>
	<van-radio-group v-model="radio">
	  <van-radio name="1" label-disabled>单选框 1</van-radio>
	  <van-radio name="2" label-disabled>单选框 2</van-radio>
	</van-radio-group>
</template>

<script>
export default {
  props: {},
  data() {
    return {
    	// 声明后就正常了
  		// radio: null,
    };
  },
  created() {
  },
  methods: {
    Init() {
     	this.radio= ''
    }
  },
};
</script>

情况二: radio绑定的是data里对象中的属性
因为删除再添加 相当于新增属性 不通过像this.$set方式添加的属性不是响应式的(Object.defineProperty)不存在get和set,无法实时更新

<template>
	<van-radio-group v-model="qwe.radio">
	  <van-radio name="1" label-disabled>单选框 1</van-radio>
	  <van-radio name="2" label-disabled>单选框 2</van-radio>
	</van-radio-group>
</template>

<script>
export default {
  props: {},
  data() {
    return {
    	qwe: {
    	  radio: null,
    	}
    };
  },
  created() {
  },
  methods: {
    Init() {
    	// 对象赋值时 绑定对象中的属性不存在了 
    	this.qwe = {}
    	// 再次赋值也无济于事 不能使用
     	this.qwe.radio= ''
    }
  },
};
</script>

总结: 绑定的变量需要在vue的data里声明的才能正常使用;并且如果绑定的变量是data中声明的对象中的属性,要保证在van-radio创建期间,对象中一直存在这个属性,不要出现覆盖后 再次赋值的情况