vue 使用v-for動(dòng)態(tài)生成的ref不能通過this.refs.name獲取到內(nèi)容

PrototypeZ 發(fā)布于2019-08-23 18:25 / 2770人閱讀

摘要：中的代碼是經(jīng)過一番排查之后我發(fā)現(xiàn)這個(gè)問題是的問題當(dāng)中直接使用時(shí)它會(huì)直接返回但是中這個(gè)是在中動(dòng)態(tài)生成時(shí)它返回的是一個(gè)數(shù)組必須通過才可以獲取到對應(yīng)的元素。

在vue的項(xiàng)目中做圖片上傳時(shí),我通過上傳圖片后獲取到input中的files屬性將其進(jìn)行處理,然后將其轉(zhuǎn)換為base64傳給后臺。 這個(gè)方法用在非v-for上動(dòng)態(tài)生成的ref上時(shí),可以通過 this.$refs.name.files[0]獲取到相關(guān)元素,但是將這個(gè)方法用在v-for動(dòng)態(tài)上傳的列表中,而且ref也是通過動(dòng)態(tài)生成的時(shí)候就獲取不到目標(biāo)元素的files。結(jié)論在最后,可以直接看。

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

    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時(shí),可以正常使用,但是將這個(gè)方法用在v-for動(dòng)態(tài)上傳的列表中,而且ref也是通過動(dòng)態(tài)生成的時(shí)候就遇到了問題。
template中的代碼是:

    
        
            {{item.name}}

經(jīng)過一番排查之后,我發(fā)現(xiàn)這個(gè)問題是ref的問題: 當(dāng)template中直接使用ref時(shí),它會(huì)直接返回ref,但是template中這個(gè)ref是在v-for中動(dòng)態(tài)生成時(shí),它返回的是一個(gè)數(shù)組,必須通過 this.$refs[refName].files[0]才可以獲取到對應(yīng)的元素。所以上面的方法在加一個(gè)判斷即可實(shí)現(xiàn)。