vue 使用v-for动态生成的ref不能通过this.refs.name获取到内容

PrototypeZ 发布于2019-08-23 18:25 / 2617人阅读

摘要：中的代码是经过一番排查之后我发现这个问题是的问题当中直接使用时它会直接返回但是中这个是在中动态生成时它返回的是一个数组必须通过才可以获取到对应的元素。

在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 获取数据库的连接数备案通过不能访问

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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