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


Posted in Javascript onMay 16, 2019

最近用了一下Vant Weapp组件库,但是由于我是用mpvue写的,所以自然跟小程序引用不一样,比如我最近引用了vant里面的collapse折叠面板,官网文档里面介绍的使用方法是这样的

1.在 app.json 或 index.json 中引入组件

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

2.通过value控制展开的面板列表,activeNames为数组格式

<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
  });
 }
});

但是在mpvue里面不能直接这样引入

下面是我的代码

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

得把原生小程序使用方式为改为mpvue 使用方式

首先是数据绑定方式

value="{{activeNames}}"

改为

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

然后是事件监听

在van-collapse组件里加个监听事件

@change="onChange($event)"

mpvue中获取event值也与原生小程序有所不同:

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
document.compatMode介绍
May 21 Javascript
javascript随机抽取0-100之间不重复的10个数
Feb 25 Javascript
最细致的vue.js基础语法 值得收藏!
Nov 03 Javascript
微信小程序 支付功能开发错误总结
Feb 21 Javascript
layui表格实现代码
May 20 Javascript
使用jquery的cookie实现登录页记住用户名和密码的方法
Mar 13 jQuery
vue2.x 通过后端接口代理,获取qq音乐api的数据示例
Oct 30 Javascript
vue element-ui实现动态面包屑导航
Dec 23 Javascript
JavaScript实现图片伪异步上传过程解析
Apr 10 Javascript
vue+axios 拦截器实现统一token的案例
Sep 11 Javascript
JavaScript读取本地文件常用方法流程解析
Oct 12 Javascript
Vue组件化(ref,props, mixin,.插件)详解
May 15 Vue.js
详解如何搭建mpvue框架搭配vant组件库的小程序项目
May 16 #Javascript
微信端调取相册和摄像头功能,实现图片上传,并上传到服务器
May 16 #Javascript
webpack4手动搭建Vue开发环境实现todoList项目的方法
May 16 #Javascript
怎样在vue项目下添加ESLint的方法
May 16 #Javascript
eslint 的三大通用规则详解
May 16 #Javascript
webpack项目使用eslint建立代码规范实现
May 16 #Javascript
Vue项目中使用jquery的简单方法
May 16 #jQuery
You might like
从刷票了解获得客户端IP的方法
2015/09/21 PHP
javascript学习笔记(十一) 正则表达式介绍
2012/06/20 Javascript
JS仿Windows开机启动Loading进度条的方法
2015/02/26 Javascript
javascript如何创建对象
2016/08/29 Javascript
jQuery实现弹出带遮罩层的居中浮动窗口效果
2016/09/12 Javascript
ionic环境配置及问题详解
2017/06/27 Javascript
使用JS实现气泡跟随鼠标移动的动画效果
2017/09/16 Javascript
vue resource post请求时遇到的坑
2017/10/19 Javascript
vue项目中用cdn优化的方法
2018/01/03 Javascript
vue-scroller记录滚动位置的示例代码
2018/01/17 Javascript
JS随机数产生代码分享
2018/02/24 Javascript
JS添加或删除HTML dom元素的方法实例分析
2019/03/05 Javascript
vue3.0 搭建项目总结(详细步骤)
2019/05/20 Javascript
Layui 解决表格异步调用后台分页的问题
2019/10/26 Javascript
vue项目查看vue版本及cli版本的实现方式
2020/10/24 Javascript
基于python实现的抓取腾讯视频所有电影的爬虫
2016/04/22 Python
python操作oracle的完整教程分享
2018/01/30 Python
python中单下划线_的常见用法总结
2018/07/10 Python
python得到电脑的开机时间方法
2018/10/15 Python
PyCharm代码提示忽略大小写设置方法
2018/10/28 Python
python xpath获取页面注释的方法
2019/01/14 Python
解析Python的缩进规则的使用
2019/01/16 Python
几个适合python初学者的简单小程序,看完受益匪浅!(推荐)
2019/04/16 Python
将python文件打包成EXE应用程序的方法
2019/05/22 Python
pandas数据筛选和csv操作的实现方法
2019/07/02 Python
Python多版本开发环境管理工具介绍
2019/07/03 Python
Python如何绘制日历图和热力图
2020/08/07 Python
Python批量获取并保存手机号归属地和运营商的示例
2020/10/09 Python
Python中openpyxl实现vlookup函数的实例
2020/10/28 Python
Python如何利用Har文件进行遍历指定字典替换提交的数据详解
2020/11/05 Python
美国NBA官方商店:NBA Store
2019/04/12 全球购物
戴森香港官方网站:Dyson香港
2021/02/11 全球购物
《黄河颂》教学反思
2014/02/07 职场文书
研修第一天随笔感言
2014/02/15 职场文书
教师爱岗敬业演讲稿
2014/05/05 职场文书
2015年留守儿童工作总结
2015/05/22 职场文书