Загрузить изображение необходимо обновить с помощью $ emit / $ on в Vue - PullRequest
Новая
       27

Загрузить изображение необходимо обновить с помощью $ emit / $ on в Vue

0 голосов
/ 31 мая 2019

У меня есть метод, который вызывает пользовательские данные через axios 

// method name getUser()
const user = await axios.get(`/user/${this.id}`)
this.id = user.data.data.id
this.name = user.data.data.name
this.email = user.data.data.email

Затем я использую это в смонтированном виде, так что если пользователь посещает /profile/id он загрузит пользовательские данные 

mounted() {
    this.getUser()
}

Я попытался загрузить изображение и отправил событие, используя глобальную шину событий, как только изображение успешно загружено. 

this.$event.$emit('IMAGE_UPLOAD')

Тогда поймайте это на смонтированном тоже 

mounted () {
// if I remove this it works, but I need to preload the data of the user
this.getUser()
this.$event.$on('IMAGE_UPLOAD', () => {
    this.getUser()
})

}

Моя проблема в том, что он не меняет изображение. Это означает, что мне все равно нужно обновить страницу, если я вызову this.getUser() тоже внутри смонтированного.

Так что мне интересно, как обойти это. Спасибо!

1 Ответ

0 голосов
/ 31 мая 2019

Поскольку URL и имя изображения не меняются при загрузке нового изображения, изображение в браузере не обновляется.Поэтому в прошлом я сделал небольшую хитрость, чтобы существенно изменить URL-адрес изображения, добавив уникальный параметр запроса.Поэтому используйте свойство data для местоположения вашего пользовательского изображения, и в вашем методе, где вы обновляете пользовательские данные, также обновляйте img url и добавляйте что-то уникальное в параметр запроса.Я обычно использую new Date().getTime().Таким образом, вы получите что-то вроде /img/user-xxxx.png?1559289852686 

data(){
   userImg: '/img/user-xxxx.png'
},
methods:{
   getUser(){
     //... get your user data
     .then((data)=>{
         this.userImg = data.user.img +'?'+ new Date().getTime();
     })
}
...