Vue.js 2.0 为什么有时双向绑定img src属性会失败？

Question

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

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

<img :src="pictureUrl" v-show="showHead" class="head-profile pull-left" />

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

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

Answer 1

online demo