原因绑定的变量未在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创建期间,对象中一直存在这个属性,不要出现覆盖后 再次赋值的情况

Logo

魔乐社区(Modelers.cn) 是一个中立、公益的人工智能社区,提供人工智能工具、模型、数据的托管、展示与应用协同服务,为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作,由全产业链共同建设、共同运营、共同享有,推动国产AI生态繁荣发展。

更多推荐