vue $refs 无法动态拼接,获取不到对象(转)

时间:2022-12-21 10:00:57

原文地址: http://www.php.cn/js-tutorial-410304.html

本篇文章给大家带来的内容是关于vue $refs中不使用拼接的原因以及解决方法,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

<li class="audio-item media" v-if="item.type == 3" @click="handleClearInterval(item.id)">
<xm-audio :audioSrc="item.content" :size="item.size" :ref="'audio'+index"></xm-audio>
</li>
handleClearInterval(id) {
_.each(this.$refs,(item,key)=>{
if(key != 'audio'+index){
console.log(this.$refs);
console.log(this.$refs.audio[key])
}
})
},

这样写就会报错

vue $refs 无法动态拼接,获取不到对象(转)

换一种写法,去掉audio

改成console.log(this.$refs[key])
这样依旧不行

vue $refs 无法动态拼接,获取不到对象(转)

官方是这样描述的

vue $refs 无法动态拼接,获取不到对象(转)

改成如下形式

<li class="audio-item media" v-if="item.type == 3" @click="handleClearInterval(item.id)">
<xm-audio :audioSrc="item.content" :size="item.size" ref="audio"></xm-audio>
</li> handleClearInterval(id) {
const audioList = this.filterListByType(this.info.instHomeworkContents,)
_.each(audioList,(item,key)=>{
if(item.id != id) {
console.log(this.$refs)
console.log(this.$refs.audio[key]);
this.$refs.audio[key].clearInterval()
}
})
},

这样就能获取到想要的那个dom,我这里是获取了,循环出的子组件,以上就是vue $refs中不使用拼接的原因以及解决方法.

vue $refs 无法动态拼接,获取不到对象(转)的更多相关文章

  1. Expression表达式目录树动态拼接 反射获取泛型方法

    class TestOne { public String[] arr = { "1", "2", "3" }; public class ...

  2. mysql 动态拼接表字段,值 mybatis 动态获取表字段

    -- 取表所有字段,自动用逗号分开 select GROUP_CONCAT(DISTINCT COLUMN_NAME) from information_schema.columns where ta ...

  3. 初识Mybatis框架&comma;实现增删改查等操作&lpar;动态拼接和动态修改&rpar;

    此第一次接触Mybatis框架确实是有点不适应,特别是刚从Hibernate框架转转型过来,那么为什么要使用Mybatis框架,Mybatis框架和Hibernate框架又有什么异同呢? 这个问题在我 ...

  4. 分享动态拼接Expression表达式组件及原理

    前言 LINQ大家都知道,用起来也还不错,但有一个问题,当你用Linq进行搜索的时候,你是这样写的 var query = from user in db.Set<User>()      ...

  5. java动态拼接sql语句并且执行时给sql语句的参数赋值

    问题 在这里举一个例子,比如我要做一个多条件模糊查询,用户输入的时候有可能输入一个条件,也有可能输入两个条件,这时执行查询的sql语句就不确定了,但可以用动态拼接sql语句来解决这个问题. 解决方法 ...

  6. mybatis 使用记录&lpar;二&rpar; 动态拼接查询条件

    2016-12-16 阅读项目代码时,在项目的xml文件中发现如下写法: SELECT student_user_id FROM tbr_student_class WHERE 1=1 <if ...

  7. Lambda表达式动态拼接&lpar;备忘&rpar;

    EntityFramework动态组合Lambda表达式作为数据筛选条件,代替拼接SQL语句 分类: C# Lambda/Linq Entity Framework 2013-05-24 06:58 ...

  8. 动态拼接 sql的时候 里面 如果有变量的话 按上面的方式进行处理

    set @Sql_Sql = N' select top 1 @m_zw=zw,@m_zh=temp from ket where zd=''ddd'' ' print @Sql_Sql EXEC s ...

  9. EF 拉姆达 动态拼接查询语句

    EF 动态拼接查询语句 using System; using System.Collections.Generic; using System.IO; using System.Linq; usin ...

随机推荐

  1. &lbrack;LeetCode&rsqb;题解(python):051-N-Queens

    题目来源 https://leetcode.com/problems/n-queens/ The n-queens puzzle is the problem of placing n queens ...

  2. css3做的动画

    基于放大缩小: http://www.credero.etall.cn/demo/jwtplay/3/content05.html 基于3d: http://www.credero.etall.cn/ ...

  3. destoon使用中的一些心得

    //**************************index首页相关参数**************************************// //全局变量 {if $seo_titl ...

  4. 网页布局&colon;float与position的区别

    网页开发中布局是一个永恒的话题.巧妙的布局会让网页具有良好的适应性和扩展性.css的布局主要涉及两个属性——position和float.它们俩看上去很容易被弄混,可是仔细分析一下,它们的区别还是很明 ...

  5. HDU1007--Quoit Design(平面最近点对)

    Problem Description Have you ever played quoit in a playground? Quoit is a game in which flat rings ...

  6. 使用XML文件定义菜单

    Android提供了两种创建菜单的方式,一种是在Java代码中创建,一种使用XML资源文件定义.上面的实例都是在Java代码中创建菜单,在Java代码中创建菜单存在如下不足. 在Java代码中定义菜单 ...

  7. 不为人知的网络编程&lpar;八&rpar;:从数据传输层深度解密HTTP

    1.引言 在文章<理论联系实际:Wireshark抓包分析TCP 3次握手.4次挥手过程>中,我们学会了用wireshark来分析TCP的“三次握手,四次挥手”,非常好用.这就是传说中的锤 ...

  8. &period;net core api &plus;swagger&lpar;一个简单的入门demo 使用codefirst&plus;mysql&rpar;

    前言: 自从.net core问世之后,就一直想了解.但是由于比较懒惰只是断断续续了解一点.近段时间工作不是太忙碌,所以偷闲写下自己学习过程.慢慢了解.net core 等这些基础方面学会之后再用.n ...

  9. 与我们息息相关的internet服务&lpar;3&rpar;---电子邮件服务

    几年前了解了一下,现在再实施的时候,再了解,当然如果要到牛人张小龙28岁时的开发程度,可能还差一个筋斗云 在起步一个公司,从组建的技术上,可能要准备很多东西,其中一个就是我们熟悉的企业邮箱. 伊妹儿, ...

  10. SpringBoot中并发定时任务的实现、动态定时任务的实现(看这一篇就够了)

    原创不易,如需转载,请注明出处https://www.cnblogs.com/baixianlong/p/10659045.html,否则将追究法律责任!!! 一.在JAVA开发领域,目前可以通过以下 ...