欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

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

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

div是循環(huán) 所以img 的ref是動態(tài)設(shè)置的 要獲取對應(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>
//這里動態(tài)傳值獲取不到

filePush1(list,index,img){
?? ?console.log(this.$refs.img)
?? ?//這樣寫會拿不到 img ?是個動態(tài)值 ?這會直接已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值 就可以拿到動態(tài)拼接$refs所要的對應(yīng)值 這的img ?是動態(tài)傳的值 ?
? ? ? ?}
}

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

項目需求:動態(tài)增減表單并驗證

代碼如下

 <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 => {
	...
   })
  })

錯誤如下

原因

  • 因為 ref 本身是作為渲染結(jié)果被創(chuàng)建的,在初始渲染的時候它們還不存在, $refs 也不是響應(yīng)式的,不能在模板中做數(shù)據(jù)綁定;
  • 當(dāng) ref 和 v-for 一起使用的時候,你得到的引用將會是一個包含了對應(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é)

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

相關(guān)文章

  • 淺談Vue Element中Select下拉框選取值的問題

    淺談Vue Element中Select下拉框選取值的問題

    下面小編就為大家分享一篇淺談Vue Element中Select下拉框選取值的問題,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2018-03-03
  • vue中使用vuex的超詳細(xì)教程

    vue中使用vuex的超詳細(xì)教程

    這篇文章主要介紹了vue中使用vuex的超詳細(xì)教程,給大家介紹vue項目怎么使用,非常適合初學(xué)者使用,保存數(shù)據(jù)以及獲取數(shù)據(jù),本文給大家介紹的非常詳細(xì),需要的朋友可以參考下
    2022-08-08
  • vue分片上傳視頻并轉(zhuǎn)換為m3u8文件播放的實現(xiàn)示例

    vue分片上傳視頻并轉(zhuǎn)換為m3u8文件播放的實現(xiàn)示例

    前端上傳大文件、視頻的時候會出現(xiàn)超時、過大、很慢等情況,為了解決這一問題,跟后端配合做了一個切片的功能,本文主要介紹了vue分片上傳視頻并轉(zhuǎn)換為m3u8文件播放的實現(xiàn)示例,感興趣的可以了解一下
    2023-11-11
  • Vue3自定義drag指令詳解

    Vue3自定義drag指令詳解

    這篇文章主要為大家詳細(xì)介紹了Vue3自定義drag指令的相關(guān)知識,文中的示例代碼講解詳細(xì),具有一定的借鑒價值,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下
    2023-12-12
  • Vue 配合eiement動態(tài)路由,權(quán)限驗證的方法

    Vue 配合eiement動態(tài)路由,權(quán)限驗證的方法

    今天小編就為大家分享一篇Vue 配合eiement動態(tài)路由,權(quán)限驗證的方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2018-09-09
  • 基于vue.js組件實現(xiàn)分頁效果

    基于vue.js組件實現(xiàn)分頁效果

    這篇文章主要為大家詳細(xì)介紹了基于vue.js組件實現(xiàn)分頁效果,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2018-12-12
  • Vue + Node.js + MongoDB圖片上傳組件實現(xiàn)圖片預(yù)覽和刪除功能詳解

    Vue + Node.js + MongoDB圖片上傳組件實現(xiàn)圖片預(yù)覽和刪除功能詳解

    這篇文章主要介紹了Vue + Node.js + MongoDB圖片上傳組件實現(xiàn)圖片預(yù)覽和刪除功能,結(jié)合實例形式詳細(xì)分析了Vue + Node.js + MongoDB基于圖片上傳組件實現(xiàn)圖片預(yù)覽和刪除功能相關(guān)操作技巧,需要的朋友可以參考下
    2020-04-04
  • Vue技巧Element Table二次封裝實戰(zhàn)示例

    Vue技巧Element Table二次封裝實戰(zhàn)示例

    這篇文章主要為大家介紹了Vue技巧Element Table二次封裝實戰(zhàn)示例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2022-11-11
  • vue實現(xiàn)瀏覽器全屏展示功能

    vue實現(xiàn)瀏覽器全屏展示功能

    這篇文章主要介紹了vue實現(xiàn)瀏覽器全屏展示功能,項目中使用的是sreenfull插件,執(zhí)行命令安裝,具體實現(xiàn)代碼跟隨小編一起看看吧
    2019-11-11
  • 詳解Vue2.0配置mint-ui踩過的那些坑

    詳解Vue2.0配置mint-ui踩過的那些坑

    這篇文章主要介紹了詳解Vue2.0配置mint-ui踩過的那些坑,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2018-04-04

最新評論