vue小程序ref和v-for结合使用得到ref数组的一些问题
项目中需要对每一个民宿里的每一个房间都需要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数组的一些问题的更多相关文章
- 浅谈vue,小程序,react基础绑定值
最近一直在用react开发项目,碰见的问题千千万,很多,但是都殊途同源,唯一区别大的就是没有像vue的双向绑定,也没有小程序的单向方便,比如: vue v-modal="msg" ...
- Vue/小程序/小程序云+Node+Mongo开发微信授权、支付和分享
大家好,我是河畔一角,今天给大家介绍我的第三门实战课程:基于微信开发的H5.小程序和小程序云的授权.支付和分享专项课程. 一.这一次为什么会选择微信支付和分享的课题呢? 金庸的小说中曾提到:有人的地方 ...
- 微信小程序 功能函数 将对象的键添加到数组 (函数深入)
// 将对象的键添加到数组 var arr = Object.keys(site); //英文 https://developer.mozilla.org/en-US/docs/Web/JavaScr ...
- 微信小程序踩坑日记4——真机端解析json数组和开发平台不一样
0. 引言 环境:访问服务器端php,获取json数组,并渲染在前台 问题描述:保证在开发平台上的正常运行,但是在真机端却出现了无法正确解析wx.request()返回的数据(特指无法解析res.da ...
- 两天快速开发一个自己的微信小程序
p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px "Songti SC" } p.p2 { margin: 0.0px 0. ...
- 微信小程序开发——开发者工具无法输入中文的处理
问题模块 框架类型 问题类型 操作系统 工具版本 开发者工具 小程序 Bug Windows v.02.1810290 异常描述: 无法输入中文,偶现,但是概率有点高,重启,重装,更新版本等等都未解决 ...
- 微信小程序开发学习资料
作者:初雪链接:https://www.zhihu.com/question/50907897/answer/128494332来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明 ...
- 快速开发一个自己的微信小程序
一.写在前面 1.为什么要学小程序开发? 对于前端开发而言,微信小程序因为其简单快速.开发成本低.用户流量巨大等特点,也就成了前端开发工程师必会的一个技能. 2.先看看小程序效果 (1)欢迎页 (2) ...
- 大学课后答案微信小程序项目实践(1)
叨逼叨 还记得以前小编上大学那会苦于课后习题没有答案...到了考试....就像下面这个图一样- 现在,那些同样在纠结于书本后的答案太遥远的同学们,要告诉你们一个好消息,个人历时两周作业的时间开发的小程 ...
随机推荐
- WLAN配置SKC
1.关于SKC WLC支持粘滞密钥缓存(Sticky Key Caching,SKC). 通过SKC,客户端为其关联的每个AP接收并存储不同的PMKID. AP还维护发布给客户端的PMKID数据库. ...
- Nexus-VDC(Virtual Device Context)
VDC实际上是将一台物理的Nexus7K设备虚拟为多个逻辑的VDC设备,该术语叫做VDC(Virtual Device Context),该虚拟技术实际上是在一个物理设备架构和内核上运行多个VDC,已 ...
- ES-基本操作
(1)创建索引 put 192.168.247.197:9200/type2 /type2 (2)创建映射 post 192.168.247.197:9200/type2/type/_mapping ...
- C++ STL之集合set的使⽤
写在最前面,本文摘录于柳生笔记: set是集合,一个set里面个元素各不相同的,而且set会按照元素从小到大的进行排序,一下是set的常用方法:
- 「CF197B Limit」
题目撞名 题目大意: 给出两个函数 \(P(x),Q(x)\). \(P(x)=a_0 \times x^N+a_1 \times x^{N-1}+a_2 \times x^{N-2} \cdots ...
- table 实现向下滑动首行冻结,向右滑动左列冻结
<html> <head> <meta charset="utf-8"> <title>测试</title> <M ...
- 「JSOI2011」棒棒糖
「JSOI2011」棒棒糖 传送门 双倍经验 考虑主席树做法. 对于当前的主席树节点,如果 \(\le mid\) 的个数足够就往左边走,否则就尝试往右边走,都不行就返回 \(0\). 参考代码: # ...
- JavaScript - onunload失效
参考 https://stackoverflow.com/questions/7794301/window-onunload-is-not-working-properly-in-chrome-bro ...
- 「快学SpringBoot」配置文件的加载顺序和配置项默认值设置
前言 有的时候,配置信息是我们无法在开发过程中就能确定的.比如,给客户开发的项目,客户需要根据自身的情况自定义配置,如数据库配置,加密密钥配置等等.这时候,就需要把配置文件放在外面,让用户自定义配置部 ...
- [NOI 2011]NOI 嘉年华
Description 题库链接 给你 \(n\) 个区间,让你选出其中一些分为两组,要求两组区间不能有交集,组内可以有交集.让你最大化两组之间区间个数较小的那一组的选取区间个数.以及对于每个区间 \ ...