mpvue vant-weapp 中使用复选框组时,获取不到this.selectComponent

最新推荐文章于 2024-10-01 19:44:57 发布

原创最新推荐文章于 2024-10-01 19:44:57 发布 · 1.1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js

Vue 专栏收录该内容

45 篇文章

订阅专栏

博客主要讲述在mpvue中使用vant-weapp UI组件库的复选框组时，遇到this.selectComponent找不到的问题。指出使用过该组件的人都知道获取事件中的值要用this.mp，通过此方法可解决找不到selectComponent的问题。

1. 在mpvue中使用vant-weappUI组件库中使用复选框组遇到 this.selectComponent 找不到问题

1.1 使用过这个的朋友应该都知道获取事件中的值,要this.mp;
解决找不到的问题

toggle(event) {
   const { index } = event.mp.currentTarget.dataset;
   const checkbox = this.$mp.page.selectComponent(`.checkboxes-${index}`);
   checkbox.toggle();
},

这样就可以获取到selectComponent了

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

TO_WebNow

关注关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

微信小程序 - wx:for 循环渲染多个 “重复“ 子组件（仅子组件 id 不同，this.selectComponent 使用时依然能准确找到子组件）将子组件 id 设为动态每个子组件都是独立的！

🏆 前端领域优质创作者

02-21

3033

微信小程序子组件id怎么是变量，微信小程序中selectComponent的使用(wx:for组件内使用id)，微信小程序循环渲染子组件，微信小程序如何让组件的id变成动态的，微信小程序怎么将循环体内插入子组件，微信小程序把组件id设为动态,然后用selectComponent再找到微信小程序子组件的id如何绑定变量，微信小程序将子组件设置动态id后，父组件怎么selectComponent调用呢，循环数组wx:for中使用this.selectComponent获取子组件，微信小程序父组件循环使

微信小程序笔记

qq_41910413的博客

05-07

932

1.JSON配置 2.WXML语法 2.1.数据绑定 WXML 中的动态数据均来自对应 Page 的 data。数据绑定使用 Mustache 语法（双大括号）将变量包起来； <view wx:if="{{condition}}"> </view> <view wx:for="{{list}} " wx:for-index="index" wx:for-item="itemName"> {{item}} </view> 属性等都需要放在双引号中间，

参与评论您还未登录，请先登录后发表或查看评论

微信小程序16: 组件通信

饭一口口吃的博客

05-07

1229

组件通信是小程序开发中肯定会遇到的问题，父组件如何和子组件进行通讯，子组件如何和复组件之间通讯，父组件如何调用子组件中的方法

优秀博客：小程序通信方法在 Vue 3 中的对应技术

everfoot的博客

10-01

1495

通过对比小程序和 Vue 3 中的通信方法，我们可以发现尽管它们的实现细节有所不同，但核心思想是一致的：即如何在不同组件或页面之间有效地传递数据和事件。这些对应关系不仅有助于我们更好地理解不同框架之间的异同点，还能帮助我们更灵活地运用这些技术来构建高效、可维护的前端应用。

vant-weapp中selectComponent无法正常访问组件实例

m0_52948787的博客

02-23

1301

项目使用wepy框架使用到了vant-weapp中的倒计时通过 selectComponent 选择器获取到组件实例后，可以调用start、pause、reset方法。文档中的使用示例是 start() { const countDown = this.selectComponent('.control-count-down'); countDown.start(); }, wepy中这样的语法会报错解决: this.$wxpage.selectComponent(’xxx‘)

mpvue中使用selectComponent获取自定义组件实例

Dlychee的博客

11-03

2118

一、mpvue中无法使用selectComponent的解决办法 this.$mp.page.selectComponent('.xxx') 其中xxx是父组件中使用了这个组件并且设置了一个 id 或是class 类样式二、这里用vant Weapp中countDown倒计时组件举个例子手动控制通过 selectComponent 选择器获取到组件实例后，可以调用start、pause、reset方法这是vant Weapp中给出的代码自行查看https://vant-contrib.gite

基于 mpvue + vant-weapp 的商城微信小程序.zip

最新发布

09-18

其中，基于mpvue和vant-weapp技术框架的商城微信小程序，不仅充分利用了mpvue的跨平台能力，还整合了vant-weapp的丰富组件资源，旨在为用户提供更加流畅和美观的购物体验。 mpvue是一个使用Vue.js开发小程序的前端...

基于mpvue和vant-weapp的垃圾分类小程序新版源码.zip

04-07

基于mpvue和vant-weapp的垃圾分类小程序新版源码介绍本资源是一套基于mpvue与vant-weapp开发的垃圾分类小程序源码，融合了Vue.js的高效开发模式与微信小程序平台的便捷性。mpvue作为小程序开发框架，提供了完整的...

vant-weapp.rar

11-29

直接在对应需要用的组件的json文件引入相应的组件。例如： { "usingComponents": { "van-popup": "/pages/vant-weapp/popup/index" }, "navigationBarTitleText": "成为会员" }

精选资源

参照Vant-Weapp开发的抖音原生小程序UI组件库.zip

02-25

Vant-Weapp是一个轻量级的小程序组件库，它在微信小程序中广泛使用，以其简洁、高效和高度可定制的特点深受开发者喜爱。这个特定的组件库应该是对Vant-Weapp的移植和优化，以适应抖音小程序的特性和需求。【描述】...

在mpvue框架中使用Vant WeappUI组件库的注意事项【推进】

12-09

本文将详细介绍在MPVue框架中使用Vant Weapp UI组件库的步骤和注意事项。 1. 引入组件库引入Vant Weapp UI组件库主要有两种方式： - **npm下载**：通过npm命令行工具安装，然后在项目的`index.json`或各页面的`...

在vue中使用vant TreeSelect分类选择组件操作

01-22

中文文档：TreeSelect 分类选择效果展示： //先在你需要的页面中引入，第一个是弹出层,第二个是选择的 import { Popup } from vant; import { TreeSelect } from vant; 代码部分： <van-tree-select :items=items :active-id.sync=items.activeId :main-active-index.sync=ite

微信小程序 selectComponent 获取组件为 null

Sport_18的博客

01-18

2734

最近在做一个需求时偶尔发现一个 bug ，排查很久后发现是因为调用 this.selectComponent 时没有获取到组件的问题。分析没有在父组件渲染时的生命周期中调用，所以不会是页面和组件的渲染流先后问题在其地方调用时能获取到，所以不会是组件的问题只有在某些时间点调用才会是 null ，分析那些时间点所做的操作原因在那个时间点里改变的一个值的判断，而组件使用 wx:if 来判断是否显示组件，而当不显示组件时，调用 this.selectComponent 为 null 总结 .

【IMWel训练作业】vue select component

麦多

04-22

919

html代码 custom select custom select2 JavaScript代码 Vue.component("custom-select",{ data:function(){ return { selectShow:false, val:""

wepy和wepy2中正确调用this.selectComponent()方法

一键写代码的博客

07-07

1112

我们知道，在原生小程序写法中，可以this.selectComponent()来获取子组件。但是在wepy中，this是包装过的对象了，无法直接调用原生api。在wepy1.x中调用： this.$wxpage.selectComponent() 在wepy2.x中调用 his.$wx.selectComponent('选择器') 具体可以打印出this查看，一目了然。 ...

IMWeb训练营-VUE-CustomSelectComponent

NC1995

04-22

441

VueJS 自定义组件<!DOCTYPE html> <html lang="en"> <head> <title></title> <meta charset="UTF-8"> <link href="css/style.css" rel="stylesheet"> </head> <body> <div id="app"> <h2>自定义组

Js control select component

clitonmr的专栏

12-17

618

html] 1 xxxxxxxxxx 2 yyyyyyyyyy 3 zzzzzzzzzz 4 wwwwwwwwww设置第３项为选中项清空选择框填充选择框移除第一项修改第一项 function setSel(str){ with(document.all){ for(var i=0;i if (mysel.opt

【IMWeb训练营作业】第二次Vue作业-select component

堆堆锥的博客

04-22

394

自定义的下拉框1 自定义的下拉框2 //注册组件 Vue.component('custom-select', { data: function(){ return { selectShow: false, val: '' } }, props: ['btn', 'li

ios浏览器上，复选框checkbox默认选中或勾选时，不显示的问题

H_hanlinglingzi的博客

03-10

1602

检查input标签，css样式-webkit-appearance属性设置是否为none或auto 更改为checkbox

Vant及Vant-Weapp离线文档下载与使用指南

标题中提到的“vant”和“vant-weapp”是两个与前端开发密切相关的技术资源。Vant 是一个流行的移动端 Vue 组件库，专注于提供高质量、易用、美观的 Vue.js 组件，由有赞公司维护，广泛用于构建具有响应式设计的web...