详解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 相关文章推荐
Raphael一个用于在网页中绘制矢量图形的Javascript库
Jan 08 Javascript
ajax与302响应代码测试
Oct 23 Javascript
jQuery实现瀑布流的取巧做法分享
Jan 12 Javascript
jQuery经过一段时间自动隐藏指定元素的方法
Mar 17 Javascript
JS+Canvas绘制时钟效果
Aug 20 Javascript
js遍历获取表格内数据的方法(必看)
Apr 06 Javascript
Vue上传组件vue Simple Uploader的用法示例
Aug 25 Javascript
去掉vue 中的代码规范检测两种方法(Eslint验证)
Mar 21 Javascript
对angular2中的ngfor和ngif指令嵌套实例讲解
Sep 12 Javascript
Vue 后台管理类项目兼容IE9+的方法示例
Feb 20 Javascript
Vue data的数据响应式到底是如何实现的
Feb 11 Javascript
Vue中正确使用Element-UI组件的方法实例
Oct 13 Javascript
详解如何搭建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
详解WordPress中添加友情链接的方法
2016/05/21 PHP
PHP表单验证内容是否为空的实现代码
2016/11/14 PHP
Javascript调用XML制作连动下拉列表框
2006/06/25 Javascript
Javascript 不能释放内存.
2006/09/07 Javascript
优化JavaScript脚本的性能的几个注意事项
2006/12/22 Javascript
JavaScript DOM学习第一章 W3C DOM简介
2010/02/19 Javascript
JavaScript高级程序设计 阅读笔记(七) ECMAScript中的语句
2012/02/27 Javascript
通过jQuery源码学习javascript(三)
2012/12/27 Javascript
当某个文本框成为焦点时即清除文本框内容
2014/04/28 Javascript
Bootstrap中文本框的宽度变窄并且加入一副验证码图片的实现方法
2016/06/23 Javascript
jquery 动态增加,减少input表单的简单方法(必看)
2016/10/12 Javascript
在DWR中实现直接获取一个JAVA类的返回值的两种方法
2016/12/25 Javascript
javascript函数的节流[throttle]与防抖[debounce]
2017/11/15 Javascript
浅谈Webpack自动化构建实践指南
2017/12/18 Javascript
原生JS实现多个小球碰撞反弹效果示例
2018/01/31 Javascript
详解vue的diff算法原理
2018/05/20 Javascript
基于webpack4搭建的react项目框架的方法
2018/06/30 Javascript
解决Vue.js应用回退或刷新界面时提示用户保存修改问题
2019/11/24 Javascript
Vue.directive 实现元素scroll逻辑复用
2019/11/29 Javascript
Python实现栈的方法
2015/05/26 Python
python自动化生成IOS的图标
2018/11/13 Python
Python实现八皇后问题示例代码
2018/12/09 Python
python实现TCP文件传输
2020/03/20 Python
Python Pillow(PIL)库的用法详解
2020/09/19 Python
python 用pandas实现数据透视表功能
2020/12/21 Python
基于Html5实现的语音搜索功能
2019/05/13 HTML / CSS
详解如何获取localStorage最大存储大小的方法
2020/05/21 HTML / CSS
SAZAC的动物连体衣和动物睡衣:Kigurumi Shop
2020/03/14 全球购物
顺丰快递Java软件工程师面试题
2015/07/31 面试题
护理学专业推荐信
2013/12/03 职场文书
幼儿教师研修感言
2014/02/12 职场文书
春季运动会开幕词
2015/01/28 职场文书
接收函
2019/04/22 职场文书
MySQL官方导出工具mysqlpump的使用
2021/05/21 MySQL
Django使用redis配置缓存的方法
2021/06/01 Redis
Dashboard管理Kubernetes集群与API访问配置
2022/04/01 Servers