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

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小程序slider组件bindchange函数
mpvue中使用vant的slider组件 发现绑定的change函数无效
mpvue+vant weapp项目开发过程中遇到的问题(第二篇)
【传送带–&amp;amp;amp;amp;amp;amp;gt;mpvue+vant weapp项目开发过程中遇到的问题(第一篇)】 一、用mpvue写自定义组件 未解决 二、数据更改更新视图无效问题 使用vue的v-show、v-if,小程序的:hidden,原生的style、class,触发点击事件更改数据后,都没有使视图更新。 ...
mpvue + Vant Weapp(第三方组件)无法双向数据绑定(v-model)
此处以 search 组件为例: &amp;amp;lt;van-search placeholder=&amp;quot;搜索 XXXX&amp;quot; use-action-slot :value=&amp;quot;searchValue&amp;quot; @change=&amp;quot;handleSearchChange&amp;quot; @click=&amp;quot;handleSearch&amp;quot;&amp;amp;gt; &amp;amp;l
如何使用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 ui中area组件踩坑记录
1,github 可以直接跳转到最外层,下载压缩包 01,jpg 1,官网中给的内容太少,引入官网中的例子之后,发现弹出来的组件里并没有数据。 解决方法:去他给的链接中下载area.js,在对应的组件里引入,赋值,如图01.jpg2,在点击确认之后,拿不到选中的地区的值解决方法:在confirm(确认)事件中,打印事件...
vant-UI组件初使用:浅谈 - 解说篇
vant-UI(有赞UI)组件使用 “深入浅出”。全局组件注册VS局部注册:有何区同? 默认开发者已经能够独立创建和搭建vue-cli项目 以vue默认生成的项目目录和文件为例:(目录截图省略) 一、组件的全局注册 &amp;amp;&amp;amp; 使用/调用 代码示例: // main.js import { Button, Cell, NavBar, Toast } from ...
mpvue+vant weapp项目开发过程中遇到的问题(第一篇)
一、组件上bind:方法名=“方法名”,找不到方法 报错图: 解决办法:
iview 组件无法使用
iview 组件在使用的时候需要注意的事项 vue 在组件注册的时候推荐使用kabab-case命名规则,那么官方估计都是用这个规则?? 1.多数无法使用或者使用的时候不对都是这个问题 只要在原有的标签前面加i 2.多个单词命名的控件,在iview中官方的使用说明并没有提醒用户这种组件在使用的时候要用短横杆拼接;例如:多个多选框组件 在使用CheckboxGroup应该是使用chec...
vant踩坑
公司最近开发了一款app,采用了混合式开发模式,由于时间比较紧张,所以h5页面我们采用了vue+vantUI框架来开发h5页面。下面就记录一下开发过程中的一些踩坑之旅。 1、Cell单元格右侧出现文字的情况 需求:单元格的右侧出现可以填写的内容以及内容的单位。在官网上没有看到这样的布局。实现代码: &amp;lt;van-cell-group&amp;gt; &amp;lt;van-field req...
微信小程序:vant weapp组件库在mpvue中实践
Vant Weapp 是有赞移动端组件库 Vant 的小程序版本,两者基于相同的视觉规范,提供一致的 API 接口,助力开发者快速搭建小程序应用。 官方文档 前言 除了Vant WeappUI组件库之外,还有一些其他热门组件库可供选择。 WeUI : WeUI 是一套同微信原生视觉体验一致的基础样式库,由微信官方设计团队为微信内网页和微信小程序量身设计,令用户的使用感知更加统一。包含but...
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
vue子组件绑定事件失效问题
vue中子组件绑定事件失效问题 最近在学习vue的过程中,深刻领会到组件机制的便利,但也遇到了一些麻烦的问题。 vue中在父组件中引入一个子组件,想要直接在父组件中给子组件或者包含子组件的dom元素设置是行不通的。 正确的方法是:先在子组件中监听相关事件,监听到后,将监听到的事件连带相关的参数一同返回到父组件中处理。 子组件中监听事件 &amp;amp;lt;div class=&amp;quot;con&amp;quot; @cli...
支付宝小程序实现折叠面板(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
使用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 + ', 实出勤...
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%...
引入Vant-UI全部组件的代码 - (备份)
引入Vant-UI全部组件的代码(备份) 代码罗列: import { Actionsheet, AddressEdit, AddressList, Area, Badge, BadgeGroup, Button, Card, Cell, CellGroup, Checkbox, CheckboxGroup, Circle, Col, ...
解决vant有赞Coupon优惠券选择器组件Bug
最近移动端商城项目整体使用有赞vant组件,在使用Coupon优惠券选择器组件时 按照官方文档做并没有出现一样的效果 发个对比图 官方代码以及展示效果 自己按照官方代码展示的效果 废了半天的时间在源码里找到了原因 更改优惠券 coupons属性如下 coupons: [ { id: ...
vue项目引入vant框架的复选框checkbox的处理
引入: &amp;lt;li v-for=&quot;(item,index) in cart&quot;&amp;gt; &amp;lt;!-- Card --&amp;gt; &amp;lt;van-checkbox v-model=&quot;item.danxuan&quot; ...
vuejs实现折叠面板展开收缩动画
vuejs通过css3实现元素固定高度到auto高度的动画和auto高度到固定高度的动画。 循环列表,html: &amp;lt;template&amp;gt; &amp;lt;div class=&quot;newslist&quot;&amp;gt; &amp;lt;ul&amp;gt; &amp;lt;li v-for=&quot;(item,index) in newslist&quot; :key=&quot;index&quot;&amp;gt;
mpvue组件使用,mpvue小程序catchtap使用
catchtap使用 @click.stop=&quot;typebar&quot;  1.切记组件不能是关键字 2.引入组件,定义组件,组件使用 import chart from '@/components/chart' import set from '@/components/set'   components: { chart, set }, &amp;lt;chart&amp;gt;&amp;lt;/char...
这个控件叫:Stepper/步进器
鉴于国内交互设计名词混乱不统一,很多设计师不知道如何用专业术语称呼一个控件,因此我开了《这个控件叫什么》专题,梳理控件的名称和使用事项,希望能为推动交互设计发展,做出一点微小的贡献。 Stepper(步进器)由一个增加按钮、一个减少按钮和一个由按钮控制的数值组成。每次点击增加按钮(或减少按钮)数字增长(或减少)的数量是恒定的。 Stepper...
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...
关于mpvue使用Vant组件库的Field输入框组件自动唤起手机软键盘问题分析
前言: 问题场景:需要在本页面点击一个div,动态show一个遮罩层,遮罩层里面有一个输入框,输入框使用Vant的Field组件写的。过程中并没有页面跳转。(本问题场景出现在mpvue中,在vue、H5等其他场景同样可以借鉴。) 解决方法: 在template里面引入对应组件(本文用的Vant,可以用原生Input,或者其他组件) 在data()里面设置聚焦初始为false...
基于移动端端vant使用ImagePreview 图片预览的使用的一些问题
关于使用vant中的ImagePreview 图片预览的使用: 使用指南 和其他组件不同,不是通过HTML结构的方式来使用,而是通过函数调用的方式。使用前需要先引入它。 import { Lazyload } from 'vant'; 基本用法 直接传入图片数组,即可展示图片预览 ImagePreview([ 'htt...
react实现的面板组件
基于react实现的面板组件
MUI组件一:折叠面板、操作表、数字角标、按钮和卡片视图
1、accordion(折叠面板) 折叠面板从二级列表中演化而来,dom结构和二级列表类似,如下: 面板1 面板1子内容 面板 面板2子内容
用 vant 组件 仿京东 选择按钮 面板(更改 van-tag 字体颜色)
一、前言 vant组件 是微信小程序里非常热门的 UI 组件。选用组件而不是自己手写的原因也很明显:降低复杂度,隐藏无关细节。接下来主要介绍,如何在微信小程序上 仿造出下方的 京东选择按钮面板: 二、组件选择:van-tag 为什么不选择 van-button 呢?因为 van-button不支持 自定义 背景颜色(background-color),除非更改 van-button 的源码。 ...
【mpvue】input组件 v-model绑定
【官方文档】在组件上使用v-model https://cn.vuejs.org/v2/guide/components.html#在组件上使用-v-model 注意:mpvue上使用input组件会有光标不稳定,输入抖动的坑,不建议使用input组件喔
vantUI框架在vue项目中的应用踩坑
细节未完善。参考地址编辑方面的应用。 1.订单提交地址等组件的应用。 使用的组件有如下: import {Card,button,Toast,AddressList,Popup,AddressEdit,Area} from 'vant' 主要是配货地址编辑这块; &amp;lt;van-address-edit :area-list=&quot;area...
mpvue + Vant Weapp 开发小程序改变 Vant 组件样式
&amp;amp;lt;template&amp;amp;gt; &amp;amp;lt;div class=&amp;quot;container&amp;quot;&amp;amp;gt; &amp;amp;lt;van-button type=&amp;quot;primary&amp;quot; size=&amp;quot;large&amp;quot; custom-class=&amp;quot;login-btn&amp;quot;&amp;amp;gt;登录&amp;amp;lt
小程序中使用MpVue框架+VantUI,编译正常但是小程序开发工具中展示时报错
小程序中使用MpVue框架+VantUI,编译正常但是小程序开发工具中展示时报错 解决办法:小程序开发工具中ES6转Ess app created and cache logs by setStorageSync VM2607:1 thirdScriptError  sdk uncaught third Error  module &quot;static/vant/checkbox/index.j...
Element-Ui组件(四十三)Collapse 折叠面板
Element-Ui组件(四十三)Collapse 折叠面板 本文来源于Element官方文档: http://element-cn.eleme.io/#/zh-CN/component/collapse 基础用法 普通折叠面板 &amp;lt;el-collapse v-model=&quot;activeNames&quot; @change=&quot;handleChange&quot;&amp;gt; &amp;lt...
引入jquery不起作用 原因
首先确认jquery引入路径正确,而且jquery的的确确是被引入进来了,通过firefox可以看到jquery代码。 在这样的情况,发现连$("#id")都找不到对象或者$(function(){})根本就没起作用,那么可能的原因除了网上所说的: html元素不符合标准,比如span里面嵌套div,form中嵌套form,table中嵌套form等(http://zhouchaofei201
select 上使用onchange函数失效 解决办法
&amp;lt;select name=&quot;qualifications&quot; style=&quot;width: 100%; height: 27px;&quot; onChange=&quot;changeQualifications(this)&quot;&amp;gt; &amp;lt;option value=&quot;1&quot; &amp;gt;销售数量&amp;lt;/option&amp;gt; &amp;lt;option value=&quot;2&quot;&
jQuery EasyUI 折叠面板accordion的使用实例
1、对折叠面板区域 div 设置 class=”easyui-accordion” 2、在区域添加多个 div, 每个 div 就是一个面板 (每个面板一定要设置 title 属性)。 3、设置面板属性 fit 为 true,自适应父容器大小<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <titl
如何优雅的使用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 的写法...
React Input组件绑定onChange函数联动其他组件
Input组件: &amp;lt;FormItem label=&quot;Account Number&quot; labelCol={defLabelCol} wrapperCol={defLabelCol} className={GlobalStyle['MF-Form-Input']}&amp;gt; { getFieldDecorator('AcctId', { rule...
vue 可折叠面板的工作区组件
这个组件中使用了elementui的两个图标 组件Js: /** 工作区组件 调用示例: &lt;work-container v-bind:height="80"&gt; &lt;template v-slot:tbar&gt; 查询表单 &lt;/template&gt; &lt;template v-slot:work&...
vue点击展开更多,点击收起
&amp;lt;!-- 休闲娱乐界面 --&amp;gt; &amp;lt;template&amp;gt; &amp;lt;div&amp;gt; &amp;lt;div class=&quot;menus&quot;&amp;gt; &amp;lt;div class=&quot;menus_item&quot;&amp;gt; &amp;lt;div class=&quot;icon_box&quot;&amp;gt; &amp;lt;spa
文章热词 机器学习教程 Objective-C培训 交互设计视频教程 颜色模型 设计制作学习
相关热词 mysql关联查询两次本表 native底部 react extjs glyph 图标 大数据培训官网 java学习者官网

相似问题