项目中需要对每一个民宿里的每一个房间都需要popup弹出层来介绍每一个房间,房间数据都在一个接口(此民宿)上。

主要代码如下:

HTML:

<view v-for='(item,index) in roomDetail' :key='index'>
  <text @tap="togglePopup('bottom', 'popup',index)" >{{item.bedsDescription}}</text>
<uni-popup :ref="`popup${index}`" :type="type" style="z-index: 99;">
//弹出层里的内容
</uni-popup>
</view>

JS:

togglePopup(type, open,id) {
 console.log(this.$refs) //主要还是自己看看refs里的东西来写,大家都不太一样
this.$refs[`popup${id}`][0].open()
}

vue小程序ref和v-for结合使用得到ref数组的一些问题的更多相关文章

  1. 浅谈vue,小程序,react基础绑定值

    最近一直在用react开发项目,碰见的问题千千万,很多,但是都殊途同源,唯一区别大的就是没有像vue的双向绑定,也没有小程序的单向方便,比如: vue   v-modal="msg" ...

  2. Vue/小程序/小程序云+Node+Mongo开发微信授权、支付和分享

    大家好,我是河畔一角,今天给大家介绍我的第三门实战课程:基于微信开发的H5.小程序和小程序云的授权.支付和分享专项课程. 一.这一次为什么会选择微信支付和分享的课题呢? 金庸的小说中曾提到:有人的地方 ...

  3. 微信小程序 功能函数 将对象的键添加到数组 (函数深入)

    // 将对象的键添加到数组 var arr = Object.keys(site); //英文 https://developer.mozilla.org/en-US/docs/Web/JavaScr ...

  4. 微信小程序踩坑日记4——真机端解析json数组和开发平台不一样

    0. 引言 环境:访问服务器端php,获取json数组,并渲染在前台 问题描述:保证在开发平台上的正常运行,但是在真机端却出现了无法正确解析wx.request()返回的数据(特指无法解析res.da ...

  5. 两天快速开发一个自己的微信小程序

    p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px "Songti SC" } p.p2 { margin: 0.0px 0. ...

  6. 微信小程序开发——开发者工具无法输入中文的处理

    问题模块 框架类型 问题类型 操作系统 工具版本 开发者工具 小程序 Bug Windows v.02.1810290 异常描述: 无法输入中文,偶现,但是概率有点高,重启,重装,更新版本等等都未解决 ...

  7. 微信小程序开发学习资料

    作者:初雪链接:https://www.zhihu.com/question/50907897/answer/128494332来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明 ...

  8. 快速开发一个自己的微信小程序

    一.写在前面 1.为什么要学小程序开发? 对于前端开发而言,微信小程序因为其简单快速.开发成本低.用户流量巨大等特点,也就成了前端开发工程师必会的一个技能. 2.先看看小程序效果 (1)欢迎页 (2) ...

  9. 大学课后答案微信小程序项目实践(1)

    叨逼叨 还记得以前小编上大学那会苦于课后习题没有答案...到了考试....就像下面这个图一样- 现在,那些同样在纠结于书本后的答案太遥远的同学们,要告诉你们一个好消息,个人历时两周作业的时间开发的小程 ...

随机推荐

  1. 第十八天re模块和&#183;正则表达式

    1.斐波那契  # 问第n个斐波那契数是多少 def func(n): if n>2: return func(n-2)+func(n-1) else: return 1 num=int(inp ...

  2. leetCode练题——14. Longest Common Prefix

    1.题目 14. Longest Common Prefix   Write a function to find the longest common prefix string amongst a ...

  3. 项目中常用的全局宏定义#define

    一 关于屏幕大小 #pragma mark - 屏幕宽高 #define SCREEN_BOUNDS ([UIScreen mainScreen].bounds) #define SCREEN_WID ...

  4. JAVA高级编程数据源datasource

    原文链接 数据源 通过jdbc连接数据库,多建立几条连接放在数据源里面.可以设置数据源的最大连接数,同时活跃的连接数,最少空闲的连接数,能够同时接收处理的连接数等等. dbcp数据源 需要的jar包: ...

  5. PCF8591 AD/DA模块使用详解

    I2C PCF8591 8位AD/DA转换 BCM2835 Library 1.PCF8591T简述 PCF8591器件图如下: PCF8591是一个8位的CMOS数据采集器件,具有4个模拟输入(其中 ...

  6. 记一次安装体验:pwn工具

    几天前删了JDK,结果和VM在一个目录中,结果VM全没了,重安走起 记载一下安装虚拟机出现的问题,官网一个字....慢,于是找了百度网盘,据说win10版本太低没法用,我就下了vw15.5.0(建立在 ...

  7. Linux内核5.4正式将华为EROFS超级文件系统合入主线

    导读 近期,Linux内核5.4系列宣布全面可用,添加了许多新功能,更强的安全性和更新的驱动程序,以提供更好的硬件支持.Linux内核5.4增加对微软exFAT文件系统的支持,另外还支持内核锁定功能, ...

  8. FineReport帆软报表需求:根据url传递过来的参数值决定显示隐藏列

    需求:角色id传递到报表页面中,然后根据角色id,决定隐藏第1列,显示第2-4列,还是隐藏第2-4列,显示第1列. 解决方法:

  9. for循环语句及批量创建用户!

    1.for 语句结构for 变量名 in 取值列表do命令序列done ================================================================ ...

  10. SpringBoot之数据访问和事务-专题三

    SpringBoot之数据访问和事务-专题三 四.数据访问 4.1.springboot整合使用JdbcTemplate 4.1.1 pom文件引入 <parent> <groupI ...