vant组件中的折叠面板在mpvue中怎么使用,我按官网方法引入了,但是onChange事件无效?
<van-collapse
      :value="activeName"
      accordion
    >
      <van-collapse-item
        title="有赞微商城"
        name="1"
      >
        提供多样店铺模板,快速搭建网上商城
      </van-collapse-item>
      <van-collapse-item
        title="有赞零售"
        name="2"
      >
        网店吸粉获客、会员分层营销、一机多种收款,告别经营低效和客户流失
      </van-collapse-item>
      <van-collapse-item
        title="有赞美业"
        name="3"
      >
        线上拓客,随时预约,贴心顺手的开单收银
      </van-collapse-item>
    </van-collapse>
export default {
  data () {
    return {
      activeName: '2'
    }
  },
  methods: {
    onChange (event) {
      console.log(event)
      this.setData({
        activeNames: event.mp.detail
      })
    }
  }
}
1

3个回答

需要在van-collpase标签里添加绑定事件:

0

话说你并没有绑定这个Change事件

<van-collapse :value="activeName" @change="onChange" accordion></van-collapse>
0

我还没有绑定事件 他就开始报错 显示items of noll

0
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
其他相关推荐
mpvue中使用vant时需要注意的onChange事件的坑
最近用了一下Vant Weapp组件库,但是由于我是用mpvue写的,所以自然跟小程序引用不一样,比如我最近引用了vant里面的collapse折叠面板,官网文档里面介绍的使用方法是这样的 1.在 app.json 或 index.json 中引入组件 &quot;usingComponents&quot;: { &quot;van-collapse&quot;: &quot;path/to/vant-weapp/dist/collapse/...
mpvue+vant weapp项目开发过程中遇到的问题(第二篇)
【传送带–&amp;amp;amp;amp;amp;amp;gt;mpvue+vant weapp项目开发过程中遇到的问题(第一篇)】 一、用mpvue写自定义组件 未解决 二、数据更改更新视图无效问题 使用vue的v-show、v-if,小程序的:hidden,原生的style、class,触发点击事件更改数据后,都没有使视图更新。 ...
Vant(有赞)UI框架爬坑记——折叠面板的使用
这次来说一下这个折叠面板啊,这个东西也是个坑啊,大家伙既然来找问题,肯定也是遇见了和我差不多的问题,就是在组件内,使用collapse折叠面板,竟然跟我说一堆错误,全局也没搜到报错的这个value.some,我那叫一个崩溃啊!! 怎么解决呢: 把这个折叠面板直接抽离出来当成一个组件来使用,这样就避免了这种报错。 ...
【mpvue】vant小程序slider组件bindchange函数
mpvue中使用vant的slider组件 发现绑定的change函数无效
微信小程序:vant weapp组件库在mpvue中实践
Vant Weapp 是有赞移动端组件库 Vant 的小程序版本,两者基于相同的视觉规范,提供一致的 API 接口,助力开发者快速搭建小程序应用。 官方文档 前言 除了Vant WeappUI组件库之外,还有一些其他热门组件库可供选择。 WeUI : WeUI 是一套同微信原生视觉体验一致的基础样式库,由微信官方设计团队为微信内网页和微信小程序量身设计,令用户的使用感知更加统一。包含but...
mpvue+vant weapp项目开发过程中遇到的问题(第一篇)
一、组件上bind:方法名=“方法名”,找不到方法 报错图: 解决办法:
折叠面板(Collapse)
折叠面板(Collapse) 开发工具与关键技术:Visual Studio 前端 作者:盘子 撰写时间:2019年5 月28 日 折叠面板(Collapse) 折叠面板知识点的整理:Bootstrap折叠板插件允许你在网页中用一点点JavaScript以及CSS类切换内容,控制内容的可见性。它是一个灵活的插件,使用少量的类(来自必需的过渡插件),以方便切换行为。 点击下面任何一个按钮,通过类更改...
mpvue引入vant(坑)
Vant-weapp是vant的小程序版本,但是由于没有使用原生小程序开发技术,在与mpvue配合使用过程中有一些坑摆在开发者面前,这些毛病可能会浪费开发者很多时间,比如说在引用Vant-weapp到mpvue的过程中,我便遇到编译通过,但在微信开发者工具中报错的情况,这是 Mpvue中使用Vant Weapp组件库和 Vant Weapp没有讲到的。 报错信息: ...
iview 组件无法使用
iview 组件在使用的时候需要注意的事项 vue 在组件注册的时候推荐使用kabab-case命名规则,那么官方估计都是用这个规则?? 1.多数无法使用或者使用的时候不对都是这个问题 只要在原有的标签前面加i 2.多个单词命名的控件,在iview中官方的使用说明并没有提醒用户这种组件在使用的时候要用短横杆拼接;例如:多个多选框组件 在使用CheckboxGroup应该是使用chec...
如何使用mpvue 引入vant weapp ui框架
一、如何使用mpvue 引入vant weapp ui框架 官方文档里面给了两种引入方式 1、通过npm安装(推荐) npm # npm npm i vant-weapp -S --production # yarn yarn add vant-weapp --production 2、下载代码 直接通过git下载 Vant Weapp` 源代码,并将dist目录拷贝到自己的项目中 git c...
vant踩坑
公司最近开发了一款app,采用了混合式开发模式,由于时间比较紧张,所以h5页面我们采用了vue+vantUI框架来开发h5页面。下面就记录一下开发过程中的一些踩坑之旅。 1、Cell单元格右侧出现文字的情况 需求:单元格的右侧出现可以填写的内容以及内容的单位。在官网上没有看到这样的布局。实现代码: &amp;lt;van-cell-group&amp;gt; &amp;lt;van-field req...
mpvue 加载iview ui进行项目开发
一、iview的官网地址 https://weapp.iviewui.com/ 二、从iview的github上下载下来代码,解压 三、将dist目录复制到项目的static目录下改名为iview 四、在需要引入的组件json文件中使用,如在日志页面加入一个按钮 "usingComponents": { "i-rate": "../../../static/ivie...
VUE项目中安装和使用vant组件
Vant 是有赞前端团队基于有赞统一的规范实现的 Vue 组件库,提供了一整套 UI 基础组件和业务组件。 特性 50+ 个经过有赞线上业务检验的组件 单元测试覆盖率超过 90% 完善的中英文文档和示例 支持 babel-plugin-import 支持 TypeScript 支持 SSR   组件中文文档地址:https://youzan.github.io/vant/#/zh-...
mpvue点击按钮转发引起的坑
项目中用任务得金币的功能,用户通过转发分享,被分享的用户登录并且浏览后,分享的用户能得到相应的金币,并且点击不同的列表,分享的path,title,以及图片也是不一样的,引发的问题,我在onShareAppMessage回调函数中拿不到数据 原生小程序可通过一下方法进行解决 &amp;lt;button open-type=&quot;share&quot; class=&quot;share_btn&quot; data-a=&quot;12&quot;&amp;...
关于mpvue使用Vant组件库的Field输入框组件自动唤起手机软键盘问题分析
前言: 问题场景:需要在本页面点击一个div,动态show一个遮罩层,遮罩层里面有一个输入框,输入框使用Vant的Field组件写的。过程中并没有页面跳转。(本问题场景出现在mpvue中,在vue、H5等其他场景同样可以借鉴。) 解决方法: 在template里面引入对应组件(本文用的Vant,可以用原生Input,或者其他组件) 在data()里面设置聚焦初始为false...
用 vant 组件 仿京东 选择按钮 面板(更改 van-tag 字体颜色)
一、前言 vant组件 是微信小程序里非常热门的 UI 组件。选用组件而不是自己手写的原因也很明显:降低复杂度,隐藏无关细节。接下来主要介绍,如何在微信小程序上 仿造出下方的 京东选择按钮面板: 二、组件选择:van-tag 为什么不选择 van-button 呢?因为 van-button不支持 自定义 背景颜色(background-color),除非更改 van-button 的源码。 ...
vue-cli3.0+vant出现的问题总结
1、轮播图在ios9以下都不能滑动 解决办法: https://github.com/surmon-china/vue-awesome-swiper npm install vue-awesome-swiper --save 全局引入 import Vue from 'vue' import VueAwesomeSwiper from 'vue-awesome-swiper...
微信小程序----折叠面板(MUI折叠面板)
微信小程序----折叠面板(MUI折叠面板) DEMO下载 实现原理 通过控制详情部分的显示隐藏,来实现折叠效果,同时切换右侧向下箭头。 效果图 WXML &amp;lt;!--pages/accordion/accordion.wxml--&amp;gt; &amp;lt;view c...
vue子组件绑定事件失效问题
vue中子组件绑定事件失效问题 最近在学习vue的过程中,深刻领会到组件机制的便利,但也遇到了一些麻烦的问题。 vue中在父组件中引入一个子组件,想要直接在父组件中给子组件或者包含子组件的dom元素设置是行不通的。 正确的方法是:先在子组件中监听相关事件,监听到后,将监听到的事件连带相关的参数一同返回到父组件中处理。 子组件中监听事件 &amp;amp;lt;div class=&amp;quot;con&amp;quot; @cli...
LayUI面板组件动态拼接后,失效的问题解决方案
当我们使用LayUI的面板元素时,可能会动态的去拼接相应的面板数据,当我们运行程序后,会发现面板不能按正常的效果执行,解决办法是须手工执行element.init(type, filter)方法即可。 官方说明:https://www.layui.com/doc/modules/element.html#render 比如我们通过js动态生成页面元素,最后我们需要 layui.ele...
MpVue开发之组件引入的问题
再一次开发订餐系统中,遇到订餐页面引入头部商品列表,底部组件时,报错,模块编译失败,未进入缓存区。 我以为是新添加的模块没有重新启动导致的,然后重新与运行npm run dev后还是失败, 最后经过反复测试, 当在父组件中引入子组件时,如果命名Header/header  Section/section  Footer/footer三个组件时。就会报错   解决...
collapse 可折叠面板的状态改变事件及布局
&amp;lt;collapse class=&quot;collapse&quot; @on-change=&quot;setName&quot;&amp;gt; &amp;lt;panel name=&quot;1&quot;&amp;gt; &amp;lt;span class=&quot;sx&quot;&amp;gt;顯示篩選:&amp;lt;/span&amp;gt; &amp;lt
解决vant有赞Coupon优惠券选择器组件Bug
最近移动端商城项目整体使用有赞vant组件,在使用Coupon优惠券选择器组件时 按照官方文档做并没有出现一样的效果 发个对比图 官方代码以及展示效果 自己按照官方代码展示的效果 废了半天的时间在源码里找到了原因 更改优惠券 coupons属性如下 coupons: [ { id: ...
【mpvue】input组件 v-model绑定
【官方文档】在组件上使用v-model https://cn.vuejs.org/v2/guide/components.html#在组件上使用-v-model 注意:mpvue上使用input组件会有光标不稳定,输入抖动的坑,不建议使用input组件喔
vue中使用vant,按钮组件ios点击没有阴影反馈效果
iOS 系统点击没有阴影反馈效果,android是ok的 在 body 标签上添加 touch 事件 example: &lt;van-button type="default"&gt;按钮&lt;/van-button&gt; &lt;div id="app" ontouchstart=""&gt; &lt;router-view&gt;&lt;/router-vi...
单选框change事件不生效问题解决
项目中遇到需要用jquery给单选框添加change事件 &amp;lt;div id=&quot;operationMethodsGroup&quot; style=&quot;float: left; margin-right: 10px;&quot;&amp;gt; &amp;lt;nobr&amp;gt;&amp;lt;label style=&quot;padding-right:5px;&quot;&amp;gt;&amp;lt;input type=&quot;radio&quot;
vue的折叠面板
这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题,有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能,丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 欢迎使用Ma...
如何优雅的使用Vant组件库
安装Vant npm i vant -S 引入Vant的第一种方法:导入所有组件(不推荐) 在src/main.js进行全局引入。 import Vant from 'vant'; import 'vant/lib/index.css'; Vue.use(Vant); 引入Vant的第二种方法:使用 babel-plugin-import (推荐) 它会在编译过程中将 import 的写法...
支付宝小程序实现折叠面板(panel)
需要实现的功能效果如下 axml文件代码 &amp;lt;view class=&quot;help-item&quot; a:for=&quot;{{helpList}}&quot; key=&quot;{{index}}&quot;&amp;gt; &amp;lt;view class=&quot;help-title&quot; onTap=&quot;clickHandle&quot; data-index='{{index}}'&amp;gt; &a
Mpvue+vant实现自定义tabBar导航栏
公司有个项目要用小程序,准备用mpvue+vant实现。一开始使用vant-tabbar就遇到了问题。下边写一下实现的流程。 1.首先上官方文档 https://developers.weixin.qq.com/miniprogram/dev/framework/ability/custom-tabbar.html?search-key=%E8%87%AA%E5%AE%9A%E4%...
vue组件库vant-ui和iview组件库使用中遇到的问题小结
1  最近项目需要临时做一个调查问卷页面。考虑到性能和复杂度,决定通过使用cdn方式编写该页面。 效果如下: 移动端采用vant.ui 遇到的问题: (1) 通过cdn方式进行开发的时候,引入官网的链接。查看network会报302错误。 &amp;lt;link rel=&quot;stylesheet&quot; href=&quot;https://unpkg.com/vant/lib/vant-css/index...
html input file onchange事件失灵的解决方法
最近写了一个关于input file的onchange事件,在页面点击上传时需要提交后台,然后再把图片显示出来,发现onchange事件在第一次点击的时候是执行的,但是第二次第三次事件就失灵了,后来是利用remove将本元素移除,再通过生成相同元素的方法来解决onchange事件的失灵事件。遇到了并解决了,所以写在这里,供大家参考。 HTML代码: [HTML] 纯文本查看 复制代码
微信小程序:有赞小程序UI( vant-weapp ) actionsheet组件源码窥探
原文链接 前言 还是微信小程序项目,虽然有一些优秀的第三方组件,但是秉持高度还原UI设计稿的原则,没有直接在项目中使用。遇到一些类似的逻辑时,可以参考一下这些开源项目的实现方式。难的往往只是某一个点,有时候我们需要的只是一张地图(PS:来自硬派脱口秀节目《知识就是力量》)。 开始 为什么研究actionsheet组件? 因为项目中设计较多的交互动画,想要自己同一封装,可多处使用。一方面可...
MUI组件一:折叠面板、操作表、数字角标、按钮和卡片视图
1、accordion(折叠面板) 折叠面板从二级列表中演化而来,dom结构和二级列表类似,如下: 面板1 面板1子内容 面板 面板2子内容
IView中on-change属性的使用
本人android开发出身,因工作需要,后台前端的代码也都有涉猎,这两天一直被input标签中的onchange困扰的头昏脑胀,辗转难眠,
vue中将原生事件绑定到非原生input 组件监听回车键实现搜索功能
为了用户体验,很可能会有这么一种操作,就是input输入框输入完内容之后,按下回车就可以执行搜索或其他业务逻辑。 实现方法: 原生的话可以直接通过如下方法即可: &amp;lt;input v-on:keyup.enter=&quot;submit&quot;&amp;gt; &amp;lt;!-- 缩写语法 --&amp;gt; &amp;lt;input @keyup.enter=&quot;submit&quot;&amp;gt; 非原生则可以通过.native...
mpvue项目使用第三方UI框架vant weapp
我们搜到的教程都是说从vant-weapp的git仓库中下载源码,拷贝dist目录到我们创建的mpvue项目文件的static或者dist或者…文件夹中,我觉得都可以吧,只是涉及你引用组件时的路径怎么写。 这里把vant-weapp的dist目录重命名为vant-weapp放在项目根目录的static文件夹下: 在src文件夹下,即我们写vue代码的位置,正在编写的页面中添加main.jso...
Angular6中组件使用注意事项
ngx-echarts 图表 本人使用Angular版本6.0.3 注意:使用的ngx-echarts版本3.1.0,版本高了会出现rxj错误。 再在angular.json里的build里面,加入 "scripts": [ "node_modules/echarts/dist/echarts.js" ] ng...
引入Vant-UI全部组件的代码 - (备份)
引入Vant-UI全部组件的代码(备份) 代码罗列: import { Actionsheet, AddressEdit, AddressList, Area, Badge, BadgeGroup, Button, Card, Cell, CellGroup, Checkbox, CheckboxGroup, Circle, Col, ...
使用vue组件来写一个折叠面板
一、之前在写折叠面板时都是使用的JQ的slideToggle,昨天对这一块代码进行重构,使用vue来进行开发 二、附上之前的代码段 for (var i = 0; i &amp;lt; ret.rows.length; i++) { var liId = 'li' + i, divId = 'div' + i; var data = '应出勤:' + ret.rows[i].empNum + ', 实出勤...