最新国产好看的视频,伊人天堂AV在线,国产Aaaaaa视频,蜜臀视频在线观看一区,人妻av色图,密臀久久久精品影片,青青视频免费观看毛片,久草在线观看视,国产三级精品色情在线

vue $refs動(dòng)態(tài)拼接獲取值問題

 更新時(shí)間:2023年01月23日 12:35:14   作者:Mr_wuying  
這篇文章主要介紹了vue $refs動(dòng)態(tài)拼接獲取值問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

vue $refs動(dòng)態(tài)拼接獲取值

div是循環(huán) 所以img 的ref是動(dòng)態(tài)設(shè)置的 要獲取對(duì)應(yīng)點(diǎn)擊的

?<div class="unionLiveDiv" v-for="(item,index) in cityLivelist" :key='index' >
? ? ? ? <div class="unionLiveImg">
? ? ? ? ? <input type="file" v-if='item.redact' @change='filePush1(cityLivelist,index,"img"+index)'/>
? ? ? ? ? <img :src='$store.state.imgSrc+item.cityLiveImg' v-if='item.cityLiveImg' :ref="'img'+index"/>
? ? ? ? ??
? ? ? ? </div>
? ? ?</div>
//這里動(dòng)態(tài)傳值獲取不到

filePush1(list,index,img){
?? ?console.log(this.$refs.img)
?? ?//這樣寫會(huì)拿不到 img ?是個(gè)動(dòng)態(tài)值 ?這會(huì)直接已img為值去獲取 ?拿到的是undefined
}

要遍歷循環(huán) 就可以獲取到值

filePush1(list,index,img){
?? ?let that=this
?? ?let refs=that.$refs
?? ?for(let key in refs){
? ? ? ? ? console.log(refs[img])
? ? ? ? ? //這里遍歷循環(huán)所有的 refs值 就可以拿到動(dòng)態(tài)拼接$refs所要的對(duì)應(yīng)值 這的img ?是動(dòng)態(tài)傳的值 ?
? ? ? ?}
}

vue $refs不能動(dòng)態(tài)拼接問題

項(xiàng)目需求:動(dòng)態(tài)增減表單并驗(yàn)證

代碼如下

 <el-form
      label-width="110px"
      :inline="true"
      v-for="(item, i) in formData"
      :key="'add' + i"
      :ref="'addForm' + i"
      :rules="addRulse"
      :model="formData[i]"
    >
	...
    </el-form>
 this.contentReqVoList.forEach((el, i) => {
   console.log(this.$refs['addForm' + i])
   this.$refs.addForm['addForm' + i].validate(v => {
	...
   })
  })

錯(cuò)誤如下

原因

  • 因?yàn)?ref 本身是作為渲染結(jié)果被創(chuàng)建的,在初始渲染的時(shí)候它們還不存在, $refs 也不是響應(yīng)式的,不能在模板中做數(shù)據(jù)綁定;
  • 當(dāng) ref 和 v-for 一起使用的時(shí)候,你得到的引用將會(huì)是一個(gè)包含了對(duì)應(yīng)數(shù)據(jù)源的這些子組件的數(shù)組。

修改代碼如下

 <el-form
      label-width="110px"
      :inline="true"
      v-for="(item, i) in formData"
      :key="'add' + i"
      ref="addForm"
      :rules="addRulse"
      :model="formData[i]"
    >
	...
    </el-form>
 this.contentReqVoList.forEach((el, i) => {
   this.$refs.addForm[i].validate(v => {
	...
   })
  })

總結(jié)

以上為個(gè)人經(jīng)驗(yàn),希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。

相關(guān)文章

  • 使用vscode 開發(fā)uniapp的方法

    使用vscode 開發(fā)uniapp的方法

    本文給大家分享我使用vscode開發(fā)的一些配置。其中包括uniapp組件語法提示,uniapp代碼提示,代碼自動(dòng)格式化問題,對(duì)vscode 開發(fā)uniapp的相關(guān)知識(shí)感興趣的朋友一起看看吧
    2021-08-08
  • ant?design?vue?pro?支持多頁(yè)簽?zāi)J絾栴}

    ant?design?vue?pro?支持多頁(yè)簽?zāi)J絾栴}

    這篇文章主要介紹了ant?design?vue?pro?支持多頁(yè)簽?zāi)J絾栴},具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2023-11-11
  • vue制作toast組件npm包示例代碼

    vue制作toast組件npm包示例代碼

    這篇文章主要介紹了vue制作一個(gè)toast組件npm包,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2020-10-10
  • antd vue 刷新保留當(dāng)前頁(yè)面路由,保留選中菜單,保留menu選中操作

    antd vue 刷新保留當(dāng)前頁(yè)面路由,保留選中菜單,保留menu選中操作

    這篇文章主要介紹了antd vue 刷新保留當(dāng)前頁(yè)面路由,保留選中菜單,保留menu選中操作,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
    2020-08-08
  • Vue引入部分element.ui組件的一些小坑記錄

    Vue引入部分element.ui組件的一些小坑記錄

    這篇文章主要介紹了Vue引入部分element.ui組件的一些小坑記錄,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2023-10-10
  • Vue組件基礎(chǔ)操作介紹

    Vue組件基礎(chǔ)操作介紹

    這篇文章主要介紹了Vue組件基礎(chǔ)操作,組件是vue.js最強(qiáng)大的功能之一,而組件實(shí)例的作用域是相互獨(dú)立的,這就意味著不同組件之間的數(shù)據(jù)無法相互進(jìn)行直接的引用
    2023-01-01
  • 4種方案帶你探索Vue代碼復(fù)用的前世今生

    4種方案帶你探索Vue代碼復(fù)用的前世今生

    我們所熟知的Vue.js也在如何提取公共代碼復(fù)用方面也一直在探索優(yōu)化,本文小編就來和各位聊聊Vue.js代碼復(fù)用的前世今生,希望對(duì)大家學(xué)習(xí)Vue有一定的幫助
    2023-05-05
  • 淺談Vue單頁(yè)面做SEO的四種方案

    淺談Vue單頁(yè)面做SEO的四種方案

    Vue SPA單頁(yè)面應(yīng)用對(duì)SEO不友好,當(dāng)然也有相應(yīng)的解決方案,通過查找資料,大概有以下4種方法,本文就詳細(xì)的介紹一下
    2021-10-10
  • Vue中vue-router路由使用示例詳解

    Vue中vue-router路由使用示例詳解

    Vue Router是Vue提供的路由管理器,將組件與路由一一對(duì)應(yīng)起來,這種對(duì)應(yīng)關(guān)系就路由,這篇文章主要介紹了Vue中vue-router路由使用,需要的朋友可以參考下
    2024-06-06
  • 如何使用Vuex+Vue.js構(gòu)建單頁(yè)應(yīng)用

    如何使用Vuex+Vue.js構(gòu)建單頁(yè)應(yīng)用

    這篇文章主要教大家如何使用Vuex+Vue.js構(gòu)建單頁(yè)應(yīng)用,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2016-10-10

最新評(píng)論

怀柔区| 泰州市| 涟水县| 天门市| 上饶市| 忻州市| 小金县| 樟树市| 平潭县| 城步| 莲花县| 铜山县| 从江县| 巫溪县| 乃东县| 元朗区| 贺兰县| 涿鹿县| 祁东县| 钦州市| 海丰县| 宁南县| 古蔺县| 特克斯县| 石棉县| 马龙县| 仁布县| 临泽县| 沅江市| 普宁市| 泉州市| 新民市| 昌邑市| 铜陵市| 阿克陶县| 太保市| 古丈县| 南通市| 华阴市| 双桥区| 磐石市|