使用vue.js更改头像而不刷新？

我认为：

<div class="seller_image" :style="{background: 'url(' + user_credentials.avatar +')', backgroundSize: 'cover ', display: 'block'}">

</div>

当我刷新页面时，我会得到头像，但当我设置它时，它不会改变图像

---

有什么建议吗？

如评论中所述，尽量避免使用jQuery，因为它大部分时间都不需要，而且会使事情变得更加复杂

请看下面的演示，以获得一个简单的图像上传器/化身转换器，或者点击这里

演示程序只是打开一个文件选择器对话框，然后返回的文件用于更新显示的图像。（发布到服务器未添加到演示中。）

到您的代码：

像

$（'#x1'）.val（）

这样的东西不应该在Vue.js中完成，因为在Vue中，您是在模型驱动下完成的

因此，唯一的真相来源是您的数据模型，而不是DOM中显示的内容

不知道你们想用x1，y1做什么。。。代码。在没有html标记的代码段中，这一点是不清楚的

newvue({
el:“#应用程序”，
数据（）{
返回{
用户凭据：{
阿凡达：'https://unsplash.it/100/100'
}
}
},
方法：{
改变化身（）{
常量输入=document.createElement（'input'）；
让自我=这个；
input.setAttribute（“类型”、“文件”）；
input.addEventListener（'change'，函数（e）{
//正在从此小提琴上载代码：http://jsfiddle.net/vacidesign/ja0tyj0f/
if（this.files&&this.files[0]）{
var reader=new FileReader（）；
reader.onload=函数（e）{
//通过回调加载图像
self.user_credentials.avatar=e.target.result；
//在这里，您可以将数据发布到后端。。。
};
reader.readAsDataURL（this.files[0]）；
}
})
input.click（）；//打开对话框
返回false；//避免导航
}
}
})

。卖家图片{
宽度：200px；
高度：200px；
}

改变

正如@AWolf所说，很难猜测您的代码有什么问题，因为我只能看到您代码库的一部分

另一个可能的问题可能是

url\u路径

。如果它保持不变，就永远不会改变。因此，您需要附加时间戳：

this.user\u credentials.avatar=url\u path+'？'+Date.now（）

---

不要同时使用

jQuery

和

vuejs

，这没有任何意义……是的，这段代码似乎在很大程度上忽略了Vue的好处，而倾向于使用jQuery的老式方式。在Vue应用程序中，jQuery代码应该非常罕见。如何调用

setAvatar

函数？Cropwhen我进入时检查元素图像在那里，但它在视图中没有更改。这不符合预期…有时图像会更改，有时不会。很难猜测代码有什么问题，因为我只能看到代码的一部分基础一个可能的问题可能是此的上下文。请检查承诺回调中的

此

是否正确。可能不会，所以您可以尝试使用self变量来获得正确的上下文。（请参见我的演示中的用法）

setAvatar:function(x,y,w,h){
          this.setAvatarLoader = true;
         var data = new FormData();
         this.x1 = $('#x1').val();
         this.y1 = $('#y1').val();
         this.w = $('#w').val();
         this.h = $('#h').val();
         this.x2 = $('#x2').val();
         this.y2 = $('#y2').val();

          data.append('avatar',this.$els.fileAvatarImage.files[0]);
          data.append('x1',this.x1);
          data.append('x2',this.x2);
          data.append('y1',this.y1);
          data.append('y2',this.y2);
          data.append('w',this.w);
          data.append('h',this.h);

          user_id = this.user_credentials.user_id;
          this.$http.post('/profile/' + user_id + '/basic_info/set_avatar',data).then(function(response){
            this.avatarImageSet = false;
            public_path = response.data.public_path;
            url_path = response.data.url_path;
            filename = response.data.filename;
            this.setAvatarLoader = false;
            this.basic_status = true;
            this.basic_success_message = response.data.successMsg;
            this.profile_image = url_path;
            this.user_credentials.avatar = url_path
            this.getAvatar();
            $("html, body").animate({ scrollTop: 0 }, "slow");


          }, function(response) {
              this.setAvatarLoader = false;
              $('#myModal').modal('hide');
                this.getAvatar();
                console.log('error');

          });
        },