javascript - Vue.js 2.0 为什么有时双向绑定img src属性会失败?
伊谢尔伦
伊谢尔伦 2017-04-11 12:40:32
[JavaScript讨论组]

正在使用vue.js 2.0 进行单文件组件式开发

这段代码是需要进行动态改变img src属性的html

这个是单文件的私有属性:

data(){

    return {
        ...
        showHead:true,
        pictureUrl:null,
        ...
    }
  }

这个是动态改变src属性的method

createImage(file) {

var reader = new FileReader();
var vm = this;
reader.onload = (e) => {
    //图片url
    vm.pictureUrl = e.target.result;
};
    reader.readAsDataURL(file);

},

经打印,属性pictureUrl 经过了上面的method之后就改变了url,但是html里的img :src属性却没有显示出来,也就是没有双向数据响应???
ps:url 是base64编码的值 也就是很长。

但是我在另一个上传组件的时候却又是可以的,请问各位vue使用者有没遇到过这个问题啊?

回复第一位回答者的问题:就是this.pictureUrl 的值已经改变了,但是在:src="pictureUrl" 没有改变 还是为null

伊谢尔伦
伊谢尔伦

小伙看你根骨奇佳,潜力无限,来学PHP伐。

全部回复(4)
怪我咯

online demo

PHP中文网

粗看下感觉做法没什么问题,到 codepen 之类的地方最简重现一下吧。

扯个题外话,用 arrow function 就不用保留 vm 引用了。

巴扎黑

vm=this这步可以省掉,你用了箭头函数了,不用存this了

黄舟

问题请描述清楚一点,不然解答不了

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号