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

 更新时间:2019年05月16日 10:18:29   作者:爱吃栗子的小单   我要评论

这篇文章主要介绍了详解mpvue中使用vant时需要注意的onChange事件的坑,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

最近用了一下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
}

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

相关文章

  • Vue.js动态添加、删除选题的实例代码

    Vue.js动态添加、删除选题的实例代码

    这篇文章主要介绍了Vue.js动态添加、删除选题的实例代码,非常不错具有参考借鉴价值,需要的朋友可以参考下
    2016-09-09
  • 最后说说Vue2 SSR 的 Cookies 问题

    最后说说Vue2 SSR 的 Cookies 问题

    这篇文章主要介绍了最后说说Vue2 SSR 的 Cookies 问题,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-05-05
  • Vue二次封装axios为插件使用详解

    Vue二次封装axios为插件使用详解

    这篇文章主要介绍了Vue二次封装axios为插件使用详解,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-05-05
  • 解析Vue.js中的组件

    解析Vue.js中的组件

    组件(Component)是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素,封装可重用的代码。这篇文章主要介绍了vue.js 中的组件,需要的朋友参考下
    2018-02-02
  • vuejs实现标签选项卡动态更改css样式的方法

    vuejs实现标签选项卡动态更改css样式的方法

    这篇文章主要介绍了vuejs实现标签选项卡-动态更改css样式的方法,代码分为html和js两部分,需要的朋友可以参考下
    2018-05-05
  • Vue2.0使用过程常见的一些问题总结学习

    Vue2.0使用过程常见的一些问题总结学习

    本篇文章主要介绍了Vue2.0使用过程常见的一些问题总结学习,详细的介绍了使用中会遇到的各种错误,有兴趣的可以了解一下。
    2017-04-04
  • Vuex 快速入门(简单易懂)

    Vuex 快速入门(简单易懂)

    这篇文章主要介绍了Vuex 快速入门(简单易懂),小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-09-09
  • vue 循环加载数据并获取第一条记录的方法

    vue 循环加载数据并获取第一条记录的方法

    今天小编就为大家分享一篇vue 循环加载数据并获取第一条记录的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09
  • vue 每次渲染完页面后div的滚动条保持在最底部的方法

    vue 每次渲染完页面后div的滚动条保持在最底部的方法

    下面小编就为大家分享一篇vue 每次渲染完页面后div的滚动条保持在最底部的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-03-03
  • Vue Router去掉url中默认的锚点#

    Vue Router去掉url中默认的锚点#

    vue-router默认hash模式——使用URL的hash来模拟一个完整的URL,于是当URL改变时,页面不会重新加载。这篇文章主要介绍了Vue Router去掉url中默认的锚点#,需要的朋友可以参考下
    2018-08-08

最新评论