vue 使用v-for動態生成的ref不能通過this.refs.name獲取到內容

PrototypeZ 發布于2019-08-23 18:25 / 2618人閱讀

摘要：中的代碼是經過一番排查之后我發現這個問題是的問題當中直接使用時它會直接返回但是中這個是在中動態生成時它返回的是一個數組必須通過才可以獲取到對應的元素。

在vue的項目中做圖片上傳時,我通過上傳圖片后獲取到input中的files屬性將其進行處理,然后將其轉換為base64傳給后臺。 這個方法用在非v-for上動態生成的ref上時,可以通過 this.$refs.name.files[0]獲取到相關元素,但是將這個方法用在v-for動態上傳的列表中,而且ref也是通過動態生成的時候就獲取不到目標元素的files。結論在最后,可以直接看。

我多帶帶上傳圖片的方法是

    uploadImg(refName) {
        let file = this.$refs[refName].files[0];
        let that = this;
        let reader = new FileReader();
        let imgUrlBase64;
        if (file) {
            imgUrlBase64 = reader.readAsDataURL(file);
            let name = file.name.split(".");
            reader.onload = function(e) {
                let imgFile= reader.result.substring(
                    reader.result.indexOf(",") + 1
                ); 
                let obj = {
                    img: [
                        {
                            originalFileName: name[0],
                            fileExtension: "." + name[1],
                            fileContent: imgFile
                        }
                    ]
                };
                that.$axios
                    .post("www.baidu.com", {
                        obj: JSON.stringify(obj)
                    })
                    .then(res => {
                        let _data = res.data.xxx;
                        if (_data.xxx== "1") {
                            let imgURL  = _data.img;
                            that.imgList.push(imgURL);
                        }
                    })
                    .catch(err => {
                        console.log(err);
                    });
            };
        }
    }

該方法在不是通過v-for生成的ref時,可以正常使用,但是將這個方法用在v-for動態上傳的列表中,而且ref也是通過動態生成的時候就遇到了問題。
template中的代碼是:

    
        
            {{item.name}}

經過一番排查之后,我發現這個問題是ref的問題: 當template中直接使用ref時,它會直接返回ref,但是template中這個ref是在v-for中動態生成時,它返回的是一個數組,必須通過 this.$refs[refName].files[0]才可以獲取到對應的元素。所以上面的方法在加一個判斷即可實現。

GPU云服務器云服務器 js通過id獲取內容獲取看見的內容通過RDS API 獲取數據庫的連接數備案通過不能訪問

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/105195.html

前端初學基礎知識 1

摘要：前端學習記錄基礎知識盒模型所有元素可以看作盒子，在中，這一術語是用來設計和布局時使用。合并后的外邊距的高度等于兩個發生合并的外邊距的高度中的較大者。按照層次結構像至低向上直到頂端，這就是事件冒泡。前端學習記錄 week 1 基礎知識 CSS盒模型所有HTML元素可以看作盒子，在CSS中，box model這一術語是用來設計和布局時使用。CSS盒模型本質上是一個盒子，封裝周圍的HTM...

MASAILA 2019-08-30 14:13 評論0 收藏0
前端初學基礎知識 1

摘要：前端學習記錄基礎知識盒模型所有元素可以看作盒子，在中，這一術語是用來設計和布局時使用。合并后的外邊距的高度等于兩個發生合并的外邊距的高度中的較大者。按照層次結構像至低向上直到頂端，這就是事件冒泡。前端學習記錄 week 1 基礎知識 CSS盒模型所有HTML元素可以看作盒子，在CSS中，box model這一術語是用來設計和布局時使用。CSS盒模型本質上是一個盒子，封裝周圍的HTM...

haobowd 2019-08-22 15:35 評論0 收藏0
前端初學基礎知識 1

摘要：前端學習記錄基礎知識盒模型所有元素可以看作盒子，在中，這一術語是用來設計和布局時使用。合并后的外邊距的高度等于兩個發生合并的外邊距的高度中的較大者。按照層次結構像至低向上直到頂端，這就是事件冒泡。前端學習記錄 week 1 基礎知識 CSS盒模型所有HTML元素可以看作盒子，在CSS中，box model這一術語是用來設計和布局時使用。CSS盒模型本質上是一個盒子，封裝周圍的HTM...

csRyan 2019-08-01 18:42 評論0 收藏0
Vue_Vue權威指南

摘要：效率不高，很多多余，稱之為臟檢查。通過索引設置數組元素并觸發視圖更新。解決閃爍問題自定義指令自定義指令提供一種機制將數據的變化映射為行為。 Vue特性 Vue只是聚焦視圖層，是一個構建數據驅動的Web界面的庫。 Vue通過簡單 API提供高效的數據綁定和靈活的組件系統輕量數據綁定指令插件化架構從傳統后臺MVC 向REST API + 前端MV*遷移DOM是數據的一種自然映...

SimonMa 2019-08-21 14:31 評論0 收藏0
后端開發者的Vue學習之路（三）

摘要：使用組件全局定義組件，第一個參數是組件名，的值是組件的內容這是個待辦項實例化是必須的，要把使用組件的區域交給管理局部注冊組件局部注冊組件全局注冊往往是不夠理想的。目錄上節內容回顧組件什么是組件組件注冊全局注冊組件局部注冊組件 ...

番茄西紅柿 2019-04-23 11:51 評論0 收藏0