vant-weapp 中checkbox radio @change时需携带参数

原创于 2020-07-14 17:18:46 发布 · 4.2k 阅读

9 ·

CC 4.0 BY-SA版权

小程序开发专栏收录该内容

2 篇文章

订阅专栏

本文详细介绍了在使用Vanilla UI的VanRadio组件时，如何处理@change事件及其默认参数event，同时展示了如何在事件处理器中传递额外的参数item，并通过实例代码解释了具体的实现方法。

van-radio中@change方法默认携带参数event：

默认传参及方法调用：

<view>
	<van-radio-group v-bind:value="item.selectSexID" @change="radioChange">
		<van-radio name="1" checked-color="#f2ae40">有性生活<text class="price">({{item.phye.sexually_price}}元)</text></van-radio>
		<van-radio name="2" checked-color="#f2ae40">有性生活<text class="price">({{item.phye.asexual_price}}元)</text></van-radio>
	</van-radio-group>
<view>

方法：

radioChange(event) {
   var value = event.detail;
}

如果要传递参数时，方法传递参数：radioChange($event,item)

<view>
	<van-radio-group v-bind:value="item.selectSexID" @change="radioChange($event,item)">
		<van-radio name="1" checked-color="#f2ae40">有性生活<text class="price">({{item.phye.sexually_price}}元)</text></van-radio>
		<van-radio name="2" checked-color="#f2ae40">有性生活<text class="price">({{item.phye.asexual_price}}元)</text></van-radio>
	</van-radio-group>
<view>

方法：

radioChange($event, item) {
	var selectPerson = this.selectPerson;
	var value = $event.detail;
	this.selectPerson = selectPerson.map((obj, index) => {
		if (item.cardid === obj.cardid) {
			return Object.assign(obj, {
				selectSexID: value
			})
		} else {
			return obj;
		}
	})
}