リフレッシュせずにvue.jsでアバターを変更しますか？

Question

私はビューのこの持っている：VUEで

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

</div> 

私はこれを持っている：

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'); 

      }); 
     }, 

私はページを更新すると、私はアバターを取得するが、私はそれを設定した時間に、それは画像を変更しませんが。

提案がありますか？

Answer 1

@AWolfは、私はあなたのコードベースの一部だけを見ることができるので、それはあなたのコードに問題が何を推測するのは難しい、言ったように。

もう1つの問題はurl_pathです。それが変わらないならば、変わらないでしょう。だから、あなたはタイムスタンプを追加する必要があります。

this.user_credentials.avatar = url_path + '?' + Date.now() 

https://jsfiddle.net/pespantelis/fy0re26m/

Answer 2

コメントに記載されているように、ほとんどの時間が必要ではなく、状況がより複雑になるため、jQueryは避けてください。

簡単な画像アップローダー/アバターチェンジャーの場合はこちらをご覧ください。fiddleこちらのデモをご覧ください。

デモはファイルピッカーダイアログを開き、返されたファイルを使用して表示されたイメージを更新します。 （サーバーへの投稿がデモに追加されません。）

あなたのコードに：Vueの中であなたはモデルを駆動することをやっているので$('#x1').val()よう

何かがVue.jsで行われるべきではありません。

真実の唯一の原因は、データモデルであり、DOMに表示されるものではありません。

x1、y1、...コードで何をしようとしているのかよく分かりません。 htmlのマークアップなしであなたのスニペットからは分かりません。

new Vue({ 
 
    el: '#app', 
 
    data() { 
 
    return { 
 
     user_credentials: { 
 
     avatar: 'https://unsplash.it/100/100' 
 
     } 
 
    } 
 
    }, 
 
    methods: { 
 
    changeAvatar() { 
 
     const input = document.createElement('input'); 
 
     let self = this; 
 
     input.setAttribute("type", "file"); 
 
     input.addEventListener('change', function(e) { 
 
     // uploading code from this fiddle: http://jsfiddle.net/vacidesign/ja0tyj0f/ 
 
     if (this.files && this.files[0]) { 
 
      var reader = new FileReader(); 
 
      reader.onload = function(e) { 
 
      // image is loaded callback 
 
      self.user_credentials.avatar = e.target.result; 
 
      // here you can post the data to your backend... 
 
      }; 
 
      reader.readAsDataURL(this.files[0]); 
 
     } 
 
     }) 
 
     input.click(); // opening dialog 
 

 
     return false; // avoiding navigation 
 
    } 
 
    } 
 
})

.seller_image { 
 
    width: 200px; 
 
    height: 200px; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.10/vue.js"></script> 
 
<div id="app"> 
 
    <div class="seller_image" :style="{background: 'url(' + user_credentials.avatar +')', backgroundSize: 'cover ', display: 'block'}"> 
 

 
    </div> 
 
    <button @click="changeAvatar()"> 
 
    Change 
 
    </button> 
 
</div>