详解mpvue中使用vant时需要注意的onChange事件的坑

"usingComponents": { "van-collapse": "path/to/vant-weapp/dist/collapse/index", "van-collapse-item": "path/to/vant-weapp/dist/collapse-item/index"}

<van-collapse value="{{ activeNames }}"> <van-collapse-item title="有赞微商城" name="1">  提供多样店铺模板，快速搭建网上商城 </van-collapse-item> <van-collapse-item title="有赞零售" name="2">  网店吸粉获客、会员分层营销、一机多种收款，告别经营低效和客户流失 </van-collapse-item> <van-collapse-item title="有赞美业" name="3" disabled>  线上拓客，随时预约，贴心顺手的开单收银 </van-collapse-item></van-collapse>

Page({ data: {  activeNames: ['1'] }, onChange(event) {  this.setData({   activeNames: event.detail  }); }});

<van-collapse :value="activeNames" @change="onChange($event)"> <van-collapse-item title="有赞微商城" name="1">  提供多样店铺模板，快速搭建网上商城 </van-collapse-item> <van-collapse-item title="有赞零售" name="2">  网店吸粉获客、会员分层营销、一机多种收款，告别经营低效和客户流失 </van-collapse-item> <van-collapse-item title="有赞美业" name="3" disabled>  线上拓客，随时预约，贴心顺手的开单收银 </van-collapse-item></van-collapse>

export default { data () {  return {   activeName: '1'  } }, methods: {  onChange (event) {   console.log(event)   this.activeName = event.mp.detail  } }}

value="{{activeNames}}"

v-bind:value="activeNames"//或者:value="activeNames"

@change="onChange($event)"

onChange(event){ // 获取表单组件filed的值 console.log(event.mp.detail) // 注意加入mp}