zoukankan      html  css  js  c++  java
  • (ref)vue遍历ref或动态或多层遍历动态ref

    <el-input
     ref="'workedInfoRef' + scope.$index" //scope.$index如果是for循环可以是index,这里用了el-table的index
    ></el-input>
    //获取
    this.$refs[`workedInfoRef${i}`];
    //input手动焦点
    this.$refs[`workedInfoRef${i}`].focus();

    如果是for循环直接遍历,下面的ref是个数组

    <li v-for="(list, index) in tagList" :key="index" ref="tagItem">{{list.value}}</li>
    this.$refs.tagItem[0].style.backgroundImage = `url(${xxx})`

    双层for循环遍历

    三. 双循环动态设置ref
    设置【:ref="‘xxx’+id"】或【:ref="‘xxx’+index"】
    <div v-for="(item,index) in topicList" :key="index">
          <el-carousel-item v-for="(son,i) in item.questionList" :key="index+i">
               <topic :ref="'topicRef'+son.bId"></topic>
               //或也可以用索引.  用一个索引会重复,如下
               //<topic :ref="'topicRef'+(i+index)"></topic>
          </el-carousel-item>
    </div>
    
    获取
            eval("that.$refs.tagItem" +(x+index))[0]
            或
            eval("that.$refs.topicRef" +(ele.bId))[0]
  • 相关阅读:
    vim配置文件解析
    VIM使用技巧5
    补不manjaro系统
    linux下终端录制
    VIM的修炼等级
    VIM使用技巧4
    64位linux 汇编
    linux下编译安装gcc5.1
    Git学习笔记
    HTML实体符号代码速查表
  • 原文地址:https://www.cnblogs.com/dianzan/p/14280592.html
Copyright © 2011-2022 走看看